瀏覽網頁的時候經常會遇到瀑布流布局的網站。也許有些讀者不了解瀑布流。瀑布流，又稱瀑布流式布局。是比較流行的一種網站頁面布局，視覺表現為參差不齊的多欄布局，隨着頁面滾動條向下滾動，這種布局還會不斷加載數據塊並附加至當前尾部。比如下面圖片的效果，就是一個典型的瀑布流。
網上有很多JQ的瀑布流插件，而且都寫好了兼容，都可以嘗試去使用，這里只是跟大家分享一下原生js實現瀑布流的效果，一起學習。
一步一步來：
首先新建一個文件，就叫瀑布流.html吧。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>瀑布流</title> <style type="text/css"> div{ background: #ccc; width: 200px; position: absolute; transition:0.5s; } </style> </head> <body> <script> //js代碼 </script> </body> </html>
這里先說明一下，就像上面那張圖片的布局一樣，只不過里面的小圖片我全部用div表示，每個div寬度（200px）都一樣，跟上面的圖片例子一樣（高度可能不一樣），然后將每一個div都絕對定位，因為在后面會通過left、top值改變div的位置。transition:0.5s;只是給div改變樣式時一個過渡。
下面是JS代碼部分：
<script type="text/javascript"> createDiv () function createDiv () { for (var i = 0; i < 20; i++) { var div = document.createElement('div'); var rnd = Math.floor(Math.random()*300+50) //div的高度在50到350之間 div.style.height = rnd + "px"; div.innerHTML = i; document.body.appendChild(div); }; change() } function change() { var aDiv = document.getElementsByTagName('div'); // alert(aDiv.length); var windowCW = document.documentElement.clientWidth; //窗口視口的寬度 var n = Math.floor(windowCW/210); //一行能容納多少個div，並向下取整 if (n<=0) {return}; // alert(n); var t = 0; var center = (windowCW - n*210)/2; //居中 var arrH = []; //定義一個數組存放div的高度 for (var i = 0; i < aDiv.length; i++) { var j = i%n; if (arrH.length==n) { //一行排滿n個后到下一行 var min = findMin(arrH); //從最“矮”的排起，可以從下圖的序號中看得出來，下一行中序號是從矮到高排列的 aDiv[i].style.left =center + min*210 + "px"; aDiv[i].style.top = arrH[min]+10 + "px"; arrH[min] += aDiv[i].offsetHeight + 10; // alert(min); }else{ arrH[j] = aDiv[i].offsetHeight; aDiv[i].style.left =center + 200*j+10*j + "px"; aDiv[i].style.top = 0; } }; } window.onresize = function(){ //窗口改變也調用函數 change(); } window.onscroll= function () { // 頁面總高度 var bodyHeight = document.documentElement.offsetHeight; // 可視區高度 var windowHeight = document.documentElement.clientHeight; //滾動條的高度 var srcollTop = document.documentElement.scrollTop || document.body.scrollTop; var srcollH = document.body.scrollHeight; // alert(srcollH); if (srcollTop+windowHeight >= srcollH-20) { createDiv(); }; } function findMin(arr) { var m = 0; for (var i = 0; i < arr.length; i++) { m = Math.min(arr[m], arr[i]) == arr[m] ? m : i; } return m; } </script>
把JS部分代碼放在html文件下就完成了，你也可以將新建一個js文件。瀏覽器打開就會看到下面的效果：
注意看2張圖片的滾動條，在第二張中已經生成了很多個div。隨着滾動條的下滑div不斷生成，這樣就沒必要將全部內容一下子顯示出來，節省空間的同時也節省了流量。京東商城或是淘寶商品詳細介紹也是下拉到該內容的時候才加載。
同時改變窗口大小也能自適應。
暫時分享到這里，如果對你有幫助就點個贊吧，不明白的地方留個言。本文是我原創的，所以有需要轉載的讀者麻煩說明一下出處，O(∩_∩)O謝謝。
//9月7號補充內容
今天做項目用到了瀑布流，就把今天寫的效果和代碼貼出來跟大家交流，寫的不好的地方歡迎指出，只有學習才有進步。
懸浮的時候有文字說明，同時透明背景過渡顯示。還可以點擊圖片查看大圖。
其實實現起來也很簡單，時間有限我直接吧js部分代碼拷貝下來。下班走人咯。
//瀑布流 var fall=document.getElementById("waterfall_ul"); createLi(); function createLi(){ for (var i = 0; i < 40; i++) { var li = document.createElement('li'); var img=document.createElement('img'); var div=document.createElement('div'); var span=document.createElement('span'); // li.style.width="210px"; fall.appendChild(li); li.appendChild(img); li.appendChild(div); div.appendChild(span); span.innerHTML="我是文字"; div.setAttribute('class',"cover"); img.setAttribute("src", "img/"+i+".jpg"); }; } function change(){ var lis=fall.getElementsByTagName("li"); var lis_W=lis[0].offsetWidth; // alert(lis_W); var imgs=fall.getElementsByTagName('img'); // alert(imgs.length); var windowCW = document.documentElement.offsetWidth; var n = Math.floor(windowCW/lis_W); var center = (windowCW - n*lis_W-(n-1)*10)/2; var arrH = []; for(var i=0;i<lis.length;i++){ var j=i%n; // alert(arrH); if (arrH.length==n) { var min = findMin(arrH); lis[i].style.left =center + min*(lis_W+10) +"px"; lis[i].style.top = arrH[min]+10 + "px"; arrH[min] += lis[i].offsetHeight + 10; var k=0; for(var b=0;b<n;b++){ k=Math.max(arrH[k],arrH[b])==arrH[k] ? k : b; } fall.style.height= arrH[k]+'px'; // alert(min); }else{ arrH[j] = imgs[i].offsetHeight; lis[i].style.left =center + lis_W*j+10*j + "px"; lis[i].style.top = 0; } } function findMin(arr) { var m = 0; for (var i = 0; i < arr.length; i++) { m = Math.min(arr[m], arr[i]) == arr[m] ? m : i; } return m; } } window.onload=function(){ change(); } window.onresize=function(){ change(); } //點擊查看圖片大圖 $(document).ready(function(){ $(".cover").click(function(){ // console.log(this.previousSibling.src); var cover_img=document.getElementById("cover_img"); var big_cover=document.getElementById('big_cover'); cover_img.setAttribute("src", this.previousSibling.src); big_cover.style.display="block"; }); $("#x").click(function(){ big_cover.style.display="none"; }); $(".cover").hover(function() { /* Stuff to do when the mouse enters the element */ $(this).animate({opacity:1}); }, function() { /* Stuff to do when the mouse leaves the element */ $(this).animate({opacity:0}); }); });
完了，再次謝謝大家的讀閱。