js瀑布流效果搭建

時間 2019-11-21

標籤瀑布效果搭建欄目 JavaScript 简体版

原文原文鏈接

最終實例下載地址：http://www.oschina.net/code/snippet_2352644_55042javascript

一.基本瀑布流實現css

這篇博客也是實例的講解，原本已經完成了一半，由於臨時有事出去，再回來一個沒注意，關閉了頁面，我記得明明會自動保存的，哎！html

圖片放在images目錄下：java

1.pngcss3

2.pngweb

3.pngajax

4.png算法

5.pngjson

6.png數組

7.png

8.png

9.png

10.png

11.png

12.png

再寫也沒有那麼多動力了，我把所有代碼直接粘貼，而後講一下里面的知識和注意問題：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>瀑布流</title>
    <style type="text/css">
/*reset*/
*{ padding:0; margin:0}
body{ height: 100%; width: 100%; font-size:12px; color:#333;}
ul{ list-style:none;}
/*demo*/
#box{ width:480px;margin:50px auto;position:relative; border-top:5px solid #ddd;}
#box div{ width:120px; position:absolute;}
#box div img{ display:block;border:1px solid #ddd; width:100px; margin:0 8px;}
</style>
</head>
<body>
    <!--瀑布流-->
    <div id="box">
     
    </div>
    
</body>
<script type="text/javascript">
window.onload=function(){
 //瀑布流
 var box=document.getElementById("box");
 var w=120;//基本寬度
 var iw=100;//圖片基本寬
 var arr_h=[0,0,0,0];//保存一行個數高度
 function init(json){//第一行處理
  var len=json.length;//獲取個數
  for(var i=0;i<len;i++){
   var obj=document.createElement("div");  
   var oimg=document.createElement("img");
   oimg.src=json[i].url;//賦值路徑 
   //經過實際值計算顯示高度 
   oimg.height=(json[i].h/json[i].w)*iw;    
   obj.appendChild(oimg);
   obj.style.left=i*w+"px";//left來自索引*基本寬
   obj.style.top="0px"; //top第一行都爲0  
   box.appendChild(obj);
   arr_h[i]=obj.offsetHeight+10;//存放當前高度     
  };
 };
 function append(json){//插入處理
  var len=json.length;//獲取個數
  for(var i=0;i<len;i++){
   //獲取高度最小位置   
   var minv=Math.min.apply(null,arr_h);
   var x;//保存最小位置值的索引
   for(var j=0;j<arr_h.length;j++){
    if(arr_h[j]==minv){
     x=j;
    };
   };
   //插入處理
   var obj=document.createElement("div");
   var oimg=document.createElement("img");
   oimg.src=json[i].url; //賦值路徑 
   //經過實際值計算顯示高度 
   oimg.height=(json[i].h/json[i].w)*iw; 
   obj.appendChild(oimg);
   obj.style.left=x*w+"px";//left來自最小索引*基本寬
   obj.style.top=arr_h[x]+"px";//top來自最小索引位置值
   box.appendChild(obj);
   arr_h[x]=arr_h[x]+obj.offsetHeight+10;//存放變化後當前高度
  };
 };
 //後臺拿來的數據
 var json1=[
  {url:"images/1.png",w:70,h:120},
  {url:"images/2.png",w:98,h:108},
  {url:"images/3.png",w:106,h:145},
  {url:"images/4.png",w:185,h:116}
 ];
 var json2=[
  {url:"images/12.png",w:150,h:100},
  {url:"images/11.png",w:150,h:187},
  {url:"images/10.png",w:148,h:132},
  {url:"images/9.png",w:152,h:110},
  {url:"images/8.png",w:109,h:123},
  {url:"images/7.png",w:95,h:142},
  {url:"images/6.png",w:148,h:114},
  {url:"images/5.png",w:188,h:107},
  {url:"images/2.png",w:98,h:108},
  {url:"images/3.png",w:106,h:145},
  {url:"images/1.png",w:70,h:120},
  {url:"images/4.png",w:185,h:116},
  {url:"images/12.png",w:150,h:100},
  {url:"images/11.png",w:150,h:187},
  {url:"images/10.png",w:148,h:132},
  {url:"images/9.png",w:152,h:110},
  {url:"images/8.png",w:109,h:123},
  {url:"images/7.png",w:95,h:142},
  {url:"images/6.png",w:148,h:114},
  {url:"images/5.png",w:188,h:107},
  {url:"images/2.png",w:98,h:108},
  {url:"images/3.png",w:106,h:145},
  {url:"images/1.png",w:70,h:120},
  {url:"images/4.png",w:185,h:116},
  {url:"images/11.png",w:150,h:187},
  {url:"images/10.png",w:148,h:132},
  {url:"images/9.png",w:152,h:110},
  {url:"images/8.png",w:109,h:123},
  {url:"images/7.png",w:95,h:142},
 ];
 init(json1);//初始化第一行
 append(json2);//插入28個圖片
 
 //滾動到最低部判斷程序 
 window.onscroll=function(){
  var page_real_h=document.documentElement.scrollHeight;//頁面真實高
  var page_see_h=document.documentElement.clientHeight;//頁面可見高
  var bot=page_real_h-page_see_h;//到最底部值
  var xtop=document.documentElement.scrollTop||document.body.scrollTop;////獲取時時滾動值,兼容谷歌
  if(xtop==bot){//到最底部
   setTimeout(function(){
    //ajax請求哪來的數據
    var json_ajax=[    
     {url:"images/4.png",w:185,h:116},
     {url:"images/12.png",w:150,h:100},
     {url:"images/11.png",w:150,h:187},
     {url:"images/10.png",w:148,h:132},
     {url:"images/9.png",w:152,h:110},
     {url:"images/8.png",w:109,h:123},
     {url:"images/7.png",w:95,h:142},
     {url:"images/6.png",w:148,h:114},
     {url:"images/5.png",w:188,h:107},
     {url:"images/2.png",w:98,h:108},
     {url:"images/3.png",w:106,h:145},
     {url:"images/1.png",w:70,h:120},
     {url:"images/4.png",w:185,h:116},
     {url:"images/11.png",w:150,h:187},
     {url:"images/10.png",w:148,h:132},
     {url:"images/9.png",w:152,h:110},
     {url:"images/8.png",w:109,h:123},
     {url:"images/7.png",w:95,h:142},
    ];
    append(json_ajax);//插入16個圖片
   },800);
  }else{};
 };
 
};
</script>
</html>

1.獲取img的高度

obj.offsetHeight

咱們能夠獲取到img的高度，不過img比較特殊，他的高度只有在load也就是加載完後獲取，爲了不這個加載快慢問題，咱們插入圖片時除了拿到連接，還有拿實際寬高。

返回的數據：

var json1=[
  {url:"images/1.png",w:70,h:120},
  {url:"images/2.png",w:98,h:108},
  {url:"images/3.png",w:106,h:145},
  {url:"images/4.png",w:185,h:116}
 ];

除了路徑，咱們是定了寬度，還要按照實際圖片比例計算顯示高度：

oimg.src=json[i].url;//賦值路徑 
   //經過實際值計算顯示高度 
   oimg.height=(json[i].h/json[i].w)*iw;

2.如何判斷頁面滾動到底部

//滾動到最低部判斷程序 
 window.onscroll=function(){
};

咱們加入了頁面滾動事件處理，滾動事件要監聽在window或者document這種頂級對象上。

咱們頁面移動時實際上是這樣的：

sh是根元素的真實高度，ch是可見高度，咱們如圖獲取差值，就是頁面到最底部的scrolltop值。

咱們利用滾動事件能夠時時獲取滾動條距離頂部值，加入判斷：

var page_real_h=document.documentElement.scrollHeight;//頁面真實高
  var page_see_h=document.documentElement.clientHeight;//頁面可見高
  var bot=page_real_h-page_see_h;//到最底部值
  var xtop=document.documentElement.scrollTop||document.body.scrollTop;////獲取時時滾動值,兼容谷歌
  if(xtop==bot){//到最底部
      },800);
  }else{};

相等時就是最底部時。

var page_real_h=document.documentElement.scrollHeight;//頁面真實高
  var page_see_h=document.documentElement.clientHeight;//頁面可見高

c獲取可見高，也就是window高，s獲取實際高度，滾動條滾動到最底部值+可見高值

document.documentElement

是頁面的根容器，表明html元素，咱們經過它計算真實高度和可見高度，由於html元素默認樣式是overflow：auto。高度等於window高度。

var xtop=document.documentElement.scrollTop||document.body.scrollTop;////獲取時時滾動值,兼容谷歌

針對谷歌兼容方案，谷歌要經過body對象獲取時時距離頂部值。其實真是根是html。

3.初始數據插入

var obj=document.createElement("div"); 
var oimg=document.createElement("img");
oimg.src=json[i].url;//賦值路徑 
//經過實際值計算顯示高度 
oimg.height=(json[i].h/json[i].w)*iw; 
obj.appendChild(oimg);

咱們根據傳入的json數據，建立節點，插入處理，

obj.style.left=i*w+"px";//left來自索引*基本寬
   obj.style.top="0px"; //top第一行都爲0

咱們這是第一行的插入，插入了4個對象，top所有爲0。left正好就是基本寬*所在索引。

0*120 1*120 2*120 3*120

arr_h[i]=obj.offsetHeight+10;//存放當前高度

保存第一行插入後，1-4個對象的高度：

而後咱們插入第5個的時候，會找到最低的那一個，咱們上面已經保存：

var arr_h=[0,0,0,0];//保存一行個數高度

通過第一行保存賦值之後可能變爲：

var arr_h=[140,100,120,50];//保存一行個數高度

此次咱們第5個對象要插入到的位置就是：

這個top值就是數組中最小那一個，咱們獲取到：

var minv=Math.min.apply(null,arr_h);

left其實就是最小值所在索引*基本寬，咱們就要先拿到最小高度值所在索引位置

var x;//保存最小位置值的索引
   for(var j=0;j<arr_h.length;j++){
    if(arr_h[j]==minv){
     x=j;
    };
   };

而後就能夠根據這個進行第5個位置設置：

obj.style.left=x*w+"px";//left來自最小索引*基本寬
   obj.style.top=arr_h[x]+"px";//top來自最小索引位置值

賦值之後，咱們保存數組這個高度值就應該發生變化，變化後的值就是原有高度值+插入元素的高度

arr_h[x]=arr_h[x]+obj.offsetHeight+10;//存放變化後當前高度

之後的每次插入，都會遍歷最小高度，left就來自所在索引，而後設置位置，以此類推。

4.到最底部時加載數據

if(xtop==bot){//到最底部
   setTimeout(function(){
    //ajax請求哪來的數據
    var json_ajax=[    
     {url:"images/4.png",w:185,h:116},
     {url:"images/12.png",w:150,h:100},
     {url:"images/11.png",w:150,h:187},
     {url:"images/10.png",w:148,h:132},
     {url:"images/9.png",w:152,h:110},
     {url:"images/8.png",w:109,h:123},
     {url:"images/7.png",w:95,h:142},
     {url:"images/6.png",w:148,h:114},
     {url:"images/5.png",w:188,h:107},
     {url:"images/2.png",w:98,h:108},
     {url:"images/3.png",w:106,h:145},
     {url:"images/1.png",w:70,h:120},
     {url:"images/4.png",w:185,h:116},
     {url:"images/11.png",w:150,h:187},
     {url:"images/10.png",w:148,h:132},
     {url:"images/9.png",w:152,h:110},
     {url:"images/8.png",w:109,h:123},
     {url:"images/7.png",w:95,h:142},
    ];
    append(json_ajax);//插入16個圖片
   },800);
  }else{};

咱們已經寫好判斷處理，只要達到這個位置，咱們直接調用插入方法，把數據插入進去便可！

5.數據模擬問題

咱們的數據都是前臺設置，其實這些應該來自後臺請求，

尤爲是滾動加載的更是一個ajax的請求處理。

二.響應式瀑布流實現--自動計算單行個數

什麼是響應式，其實在css3中已經有佈局手段，就是根據屏幕大小，調整咱們的佈局結構，我麼知道咱們的實例這中每一個div的寬是120px，咱們把他的父容器設置爲480，全部就是一行放了4個。如今咱們把這個父容器寬設置爲百分比，加入設置爲80%；

這是瀏覽器窗口大小是1000px，那麼父容器就是800px，一行個數就是800/120 約等於6.666 其實咱們一行就是能夠防止6個，每次向下取整。

咱們的核心原理總結以下：

1.判斷瀏覽器窗口寬度

2.box這個父容器的寬由百分比設置，動態來自窗口

3.一行的個數等於box寬/每一個所佔寬度

咱們先修改原有實例，作到自動判斷出一行個數，而不是寫死：

var box_w=box.offsetWidth;//獲取容易寬
 //向下取整，獲取一行個數
 var row_x=Math.floor(box_w/w);

咱們輸出的就是4，下面我就修改插入方法，根據這個計算的單行個數插入數據：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>瀑布流</title>
    <style type="text/css">
/*reset*/
*{ padding:0; margin:0}
body{ height: 100%; width: 100%; font-size:12px; color:#333;}
ul{ list-style:none;}
/*demo*/
#box{ width:480px;margin:50px auto;position:relative; border-top:5px solid #ddd;}
#box div{ width:120px; position:absolute;}
#box div img{ display:block;border:1px solid #ddd; width:100px; margin:0 8px;}
</style>
</head>
<body>
    <!--瀑布流-->
    <div id="box">
     
    </div>
    
</body>
<script type="text/javascript">
window.onload=function(){
 //瀑布流
 var box=document.getElementById("box"); 
 var w=120;//基本寬度
 var box_w=box.offsetWidth;//獲取容易寬
 //向下取整，獲取一行個數
 var row_x=Math.floor(box_w/w);
 var iw=100;//圖片基本寬
 var arr_h=[0,0,0,0];//保存一行個數高度
 function append(json,isinit,row_x){//插入處理 isinit代表是否是初始插入 初始爲true row_x被使用，顯示一行處理
  if(isinit){//初始化處理
   var len=json.length;//獲取個數
   for(var i=0;i<len;i++){
    if(i<row_x){//第一行處理
     var obj=document.createElement("div");  
     var oimg=document.createElement("img");
     oimg.src=json[i].url;//賦值路徑 
     //經過實際值計算顯示高度 
     oimg.height=(json[i].h/json[i].w)*iw;    
     obj.appendChild(oimg);
     obj.style.left=i*w+"px";//left來自索引*基本寬
     obj.style.top="0px"; //top第一行都爲0  
     box.appendChild(obj);
     arr_h[i]=obj.offsetHeight+10;//存放當前高度  
    }else{ //後續處理    
     //獲取高度最小位置   
     var minv=Math.min.apply(null,arr_h);
     var x;//保存最小位置值的索引
     for(var j=0;j<arr_h.length;j++){
      if(arr_h[j]==minv){
       x=j;
      };
     };
     //插入處理
     var obj=document.createElement("div");
     var oimg=document.createElement("img");
     oimg.src=json[i].url; //賦值路徑 
     //經過實際值計算顯示高度 
     oimg.height=(json[i].h/json[i].w)*iw; 
     obj.appendChild(oimg);
     obj.style.left=x*w+"px";//left來自最小索引*基本寬
     obj.style.top=arr_h[x]+"px";//top來自最小索引位置值
     box.appendChild(obj);
     arr_h[x]=arr_h[x]+obj.offsetHeight+10;//存放變化後當前高度 
    };       
   };   
  }else{
   var len=json.length;//獲取個數
   for(var i=0;i<len;i++){
    //獲取高度最小位置   
    var minv=Math.min.apply(null,arr_h);
    var x;//保存最小位置值的索引
    for(var j=0;j<arr_h.length;j++){
     if(arr_h[j]==minv){
      x=j;
     };
    };
    //插入處理
    var obj=document.createElement("div");
    var oimg=document.createElement("img");
    oimg.src=json[i].url; //賦值路徑 
    //經過實際值計算顯示高度 
    oimg.height=(json[i].h/json[i].w)*iw; 
    obj.appendChild(oimg);
    obj.style.left=x*w+"px";//left來自最小索引*基本寬
    obj.style.top=arr_h[x]+"px";//top來自最小索引位置值
    box.appendChild(obj);
    arr_h[x]=arr_h[x]+obj.offsetHeight+10;//存放變化後當前高度
   };   
  };  
 };
 //後臺拿來的數據
 var json1=[
  {url:"images/1.png",w:70,h:120},
  {url:"images/2.png",w:98,h:108},
  {url:"images/3.png",w:106,h:145},
  {url:"images/4.png",w:185,h:116},
  {url:"images/12.png",w:150,h:100},
  {url:"images/11.png",w:150,h:187},
  {url:"images/10.png",w:148,h:132},
  {url:"images/9.png",w:152,h:110},
  {url:"images/8.png",w:109,h:123},
  {url:"images/7.png",w:95,h:142},
  {url:"images/6.png",w:148,h:114},
  {url:"images/5.png",w:188,h:107},
  {url:"images/2.png",w:98,h:108},
  {url:"images/3.png",w:106,h:145},
  {url:"images/1.png",w:70,h:120},
  {url:"images/4.png",w:185,h:116},
  {url:"images/12.png",w:150,h:100},
  {url:"images/11.png",w:150,h:187},
  {url:"images/10.png",w:148,h:132},
  {url:"images/9.png",w:152,h:110},
  {url:"images/8.png",w:109,h:123},
  {url:"images/7.png",w:95,h:142},
  {url:"images/6.png",w:148,h:114},
  {url:"images/5.png",w:188,h:107},
  {url:"images/2.png",w:98,h:108},
  {url:"images/3.png",w:106,h:145},
  {url:"images/1.png",w:70,h:120},
  {url:"images/4.png",w:185,h:116},
  {url:"images/11.png",w:150,h:187},
  {url:"images/10.png",w:148,h:132},
  {url:"images/9.png",w:152,h:110},
  {url:"images/8.png",w:109,h:123},
  {url:"images/7.png",w:95,h:142},
 ];
 append(json1,true,row_x);//初始化
 
 //滾動到最低部判斷程序 
 window.onscroll=function(){
  var page_real_h=document.documentElement.scrollHeight;//頁面真實高
  var page_see_h=document.documentElement.clientHeight;//頁面可見高
  var bot=page_real_h-page_see_h;//到最底部值
  var xtop=document.documentElement.scrollTop||document.body.scrollTop;////獲取時時滾動值,兼容谷歌
  if(xtop==bot){//到最底部
   setTimeout(function(){
    //ajax請求哪來的數據
    var json_ajax=[    
     {url:"images/4.png",w:185,h:116},
     {url:"images/12.png",w:150,h:100},
     {url:"images/11.png",w:150,h:187},
     {url:"images/10.png",w:148,h:132},
     {url:"images/9.png",w:152,h:110},
     {url:"images/8.png",w:109,h:123},
     {url:"images/7.png",w:95,h:142},
     {url:"images/6.png",w:148,h:114},
     {url:"images/5.png",w:188,h:107},
     {url:"images/2.png",w:98,h:108},
     {url:"images/3.png",w:106,h:145},
     {url:"images/1.png",w:70,h:120},
     {url:"images/4.png",w:185,h:116},
     {url:"images/11.png",w:150,h:187},
     {url:"images/10.png",w:148,h:132},
     {url:"images/9.png",w:152,h:110},
     {url:"images/8.png",w:109,h:123},
     {url:"images/7.png",w:95,h:142},
    ];
    append(json_ajax,false,0);//插入16個圖片
   },800);
  }else{};
 };
 
};
</script>
</html>

咱們把init和append融合再了一塊兒，在內部根據true判斷是不是初始化操做，是初始化操做，根據單行個數參數作第一行處理。

三.響應式瀑布流實現--父容器響應設置

繼續上面處理，咱們如今就須要按照總結的原理，把box的寬度按照百分比去設置：

#box{ width:80%;margin:50px auto;position:relative; border-top:5px solid #ddd;}

咱們調整佈局div大小，咱們圖片太少，爲了方便處理。

#box div{ width:240px; position:absolute;}
#box div img{ display:block;border:1px solid #ddd; width:220px; margin:0 8px;}

此時，還有一個重要地方要作修改：

var arr_h=[];//保存一行個數高度

咱們刪除原有的那種賦值方式，只定義是一個數組就行了，最後會根據咱們處理，自動把記錄數組長度設置爲一行個數值。

似乎已經實現了咱們的響應式處理，每次改變窗口大小後刷新查看。

咱們須要的是自動判斷改變了尺寸，而後就能夠修改佈局，而不是改變大小後必須刷新查看，咱們能夠藉助resize事件去處理：

window.onresize=function(){
   location=location;
 };

簡單粗暴，咱們改變大小去觸發刷新，就響應式修改了佈局。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>瀑布流</title>
    <style type="text/css">
/*reset*/
*{ padding:0; margin:0}
body{ height: 100%; width: 100%; font-size:12px; color:#333;}
ul{ list-style:none;}
/*demo*/
#box{ width:80%;margin:50px auto;position:relative; border-top:5px solid #ddd;}
#box div{ width:240px; position:absolute;}
#box div img{ display:block;border:1px solid #ddd; width:220px; margin:0 8px;}
</style>
</head>
<body>
    <!--瀑布流-->
    <div id="box">
     
    </div>
    
</body>
<script type="text/javascript">
window.onload=function(){
 //瀑布流
 var box=document.getElementById("box"); 
 var w=240;//基本寬度
 var box_w=box.offsetWidth;//獲取容易寬
 //向下取整，獲取一行個數
 var row_x=Math.floor(box_w/w);
 var iw=220;//圖片基本寬
 var arr_h=[];//保存一行個數高度
 function append(json,isinit,row_x){//插入處理 isinit代表是否是初始插入 初始爲true row_x被使用，顯示一行處理
  if(isinit){//初始化處理
   var len=json.length;//獲取個數
   for(var i=0;i<len;i++){
    if(i<row_x){//第一行處理
     var obj=document.createElement("div");  
     var oimg=document.createElement("img");
     oimg.src=json[i].url;//賦值路徑 
     //經過實際值計算顯示高度 
     oimg.height=(json[i].h/json[i].w)*iw;    
     obj.appendChild(oimg);
     obj.style.left=i*w+"px";//left來自索引*基本寬
     obj.style.top="0px"; //top第一行都爲0  
     box.appendChild(obj);
     arr_h[i]=obj.offsetHeight+10;//存放當前高度  
    }else{ //後續處理    
     //獲取高度最小位置   
     var minv=Math.min.apply(null,arr_h);
     var x;//保存最小位置值的索引
     for(var j=0;j<arr_h.length;j++){
      if(arr_h[j]==minv){
       x=j;
      };
     };
     //插入處理
     var obj=document.createElement("div");
     var oimg=document.createElement("img");
     oimg.src=json[i].url; //賦值路徑 
     //經過實際值計算顯示高度 
     oimg.height=(json[i].h/json[i].w)*iw; 
     obj.appendChild(oimg);
     obj.style.left=x*w+"px";//left來自最小索引*基本寬
     obj.style.top=arr_h[x]+"px";//top來自最小索引位置值
     box.appendChild(obj);
     arr_h[x]=arr_h[x]+obj.offsetHeight+10;//存放變化後當前高度 
    };       
   };   
  }else{
   var len=json.length;//獲取個數
   for(var i=0;i<len;i++){
    //獲取高度最小位置   
    var minv=Math.min.apply(null,arr_h);
    var x;//保存最小位置值的索引
    for(var j=0;j<arr_h.length;j++){
     if(arr_h[j]==minv){
      x=j;
     };
    };
    //插入處理
    var obj=document.createElement("div");
    var oimg=document.createElement("img");
    oimg.src=json[i].url; //賦值路徑 
    //經過實際值計算顯示高度 
    oimg.height=(json[i].h/json[i].w)*iw; 
    obj.appendChild(oimg);
    obj.style.left=x*w+"px";//left來自最小索引*基本寬
    obj.style.top=arr_h[x]+"px";//top來自最小索引位置值
    box.appendChild(obj);
    arr_h[x]=arr_h[x]+obj.offsetHeight+10;//存放變化後當前高度
   };   
  };  
 };
 //後臺拿來的數據
 var json1=[
  {url:"images/1.png",w:70,h:120},
  {url:"images/2.png",w:98,h:108},
  {url:"images/3.png",w:106,h:145},
  {url:"images/4.png",w:185,h:116},
  {url:"images/12.png",w:150,h:100},
  {url:"images/11.png",w:150,h:187},
  {url:"images/10.png",w:148,h:132},
  {url:"images/9.png",w:152,h:110},
  {url:"images/8.png",w:109,h:123},
  {url:"images/7.png",w:95,h:142},
  {url:"images/6.png",w:148,h:114},
  {url:"images/5.png",w:188,h:107},
  {url:"images/2.png",w:98,h:108},
  {url:"images/3.png",w:106,h:145},
  {url:"images/1.png",w:70,h:120},
  {url:"images/4.png",w:185,h:116},
  {url:"images/12.png",w:150,h:100},
  {url:"images/11.png",w:150,h:187},
  {url:"images/10.png",w:148,h:132},
  {url:"images/9.png",w:152,h:110},
  {url:"images/8.png",w:109,h:123},
  {url:"images/7.png",w:95,h:142},
  {url:"images/6.png",w:148,h:114},
  {url:"images/5.png",w:188,h:107},
  {url:"images/2.png",w:98,h:108},
  {url:"images/3.png",w:106,h:145},
  {url:"images/1.png",w:70,h:120},
  {url:"images/4.png",w:185,h:116},
  {url:"images/11.png",w:150,h:187},
  {url:"images/10.png",w:148,h:132},
  {url:"images/9.png",w:152,h:110},
  {url:"images/8.png",w:109,h:123},
  {url:"images/7.png",w:95,h:142},
 ];
 append(json1,true,row_x);//初始化
 
 //滾動到最低部判斷程序 
 window.onscroll=function(){
  var page_real_h=document.documentElement.scrollHeight;//頁面真實高
  var page_see_h=document.documentElement.clientHeight;//頁面可見高
  var bot=page_real_h-page_see_h;//到最底部值
  var xtop=document.documentElement.scrollTop||document.body.scrollTop;////獲取時時滾動值,兼容谷歌
  if(xtop==bot){//到最底部
   setTimeout(function(){
    //ajax請求哪來的數據
    var json_ajax=[    
     {url:"images/4.png",w:185,h:116},
     {url:"images/12.png",w:150,h:100},
     {url:"images/11.png",w:150,h:187},
     {url:"images/10.png",w:148,h:132},
     {url:"images/9.png",w:152,h:110},
     {url:"images/8.png",w:109,h:123},
     {url:"images/7.png",w:95,h:142},
     {url:"images/6.png",w:148,h:114},
     {url:"images/5.png",w:188,h:107},
     {url:"images/2.png",w:98,h:108},
     {url:"images/3.png",w:106,h:145},
     {url:"images/1.png",w:70,h:120},
     {url:"images/4.png",w:185,h:116},
     {url:"images/11.png",w:150,h:187},
     {url:"images/10.png",w:148,h:132},
     {url:"images/9.png",w:152,h:110},
     {url:"images/8.png",w:109,h:123},
     {url:"images/7.png",w:95,h:142},
    ];
    append(json_ajax,false,0);//插入16個圖片
   },800);
  }else{};
 };
 window.onresize=function(){
   location=location;
 };
 
};
</script>
</html>

四.響應式瀑布流完成

咱們上面的處理其實不是不能夠，用戶以改變尺寸，不事後追加的都不見了。若是咱們把後添加的保存下來，改變尺寸後做爲初始數據加進去就更好了：

json1=json1.concat(json_ajax);//保存追加記錄

咱們拼接數組，而後把初始化用的json1二次賦值爲這個新數組。

window.onresize=function(){
  box.innerHTML="";
  box_w=box.offsetWidth;//獲取容易寬
  //向下取整，獲取一行個數
  row_x=Math.floor(box_w/w);
  arr_h=[];//保存一行個數高度
  
  append(json1,true,row_x);//初始化
 };

咱們其實也是重新設置，咱們最前提就是刪除box下的全部內容：

box.innerHTML="";

而後把應該佈局的所有從新計算：

box_w=box.offsetWidth;//獲取容易寬
  //向下取整，獲取一行個數
  row_x=Math.floor(box_w/w);
  arr_h=[];//保存一行個數高度

下面就是咱們完成的所有代碼：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>瀑布流</title>
    <style type="text/css">
/*reset*/
*{ padding:0; margin:0}
body{ height: 100%; width: 100%; font-size:12px; color:#333;}
ul{ list-style:none;}
/*demo*/
#box{ width:80%;margin:50px auto;position:relative; border-top:5px solid #ddd;}
#box div{ width:240px; position:absolute;}
#box div img{ display:block;border:1px solid #ddd; width:220px; margin:0 8px;}
</style>
</head>
<body>
    <!--瀑布流-->
    <div id="box">
     
    </div>
    
</body>
<script type="text/javascript">
window.onload=function(){
 //瀑布流
 var box=document.getElementById("box"); 
 var w=240;//基本寬度
 var box_w=box.offsetWidth;//獲取容易寬
 //向下取整，獲取一行個數
 var row_x=Math.floor(box_w/w);
 var iw=220;//圖片基本寬
 var arr_h=[];//保存一行個數高度
 function append(json,isinit,row_x){//插入處理 isinit代表是否是初始插入 初始爲true row_x被使用，顯示一行處理
  if(isinit){//初始化處理
   var len=json.length;//獲取個數
   for(var i=0;i<len;i++){
    if(i<row_x){//第一行處理
     var obj=document.createElement("div");  
     var oimg=document.createElement("img");
     oimg.src=json[i].url;//賦值路徑 
     //經過實際值計算顯示高度 
     oimg.height=(json[i].h/json[i].w)*iw;    
     obj.appendChild(oimg);
     obj.style.left=i*w+"px";//left來自索引*基本寬
     obj.style.top="0px"; //top第一行都爲0  
     box.appendChild(obj);
     arr_h[i]=obj.offsetHeight+10;//存放當前高度  
    }else{ //後續處理    
     //獲取高度最小位置   
     var minv=Math.min.apply(null,arr_h);
     var x;//保存最小位置值的索引
     for(var j=0;j<arr_h.length;j++){
      if(arr_h[j]==minv){
       x=j;
      };
     };
     //插入處理
     var obj=document.createElement("div");
     var oimg=document.createElement("img");
     oimg.src=json[i].url; //賦值路徑 
     //經過實際值計算顯示高度 
     oimg.height=(json[i].h/json[i].w)*iw; 
     obj.appendChild(oimg);
     obj.style.left=x*w+"px";//left來自最小索引*基本寬
     obj.style.top=arr_h[x]+"px";//top來自最小索引位置值
     box.appendChild(obj);
     arr_h[x]=arr_h[x]+obj.offsetHeight+10;//存放變化後當前高度 
    };       
   };   
  }else{
   var len=json.length;//獲取個數
   for(var i=0;i<len;i++){
    //獲取高度最小位置   
    var minv=Math.min.apply(null,arr_h);
    var x;//保存最小位置值的索引
    for(var j=0;j<arr_h.length;j++){
     if(arr_h[j]==minv){
      x=j;
     };
    };
    //插入處理
    var obj=document.createElement("div");
    var oimg=document.createElement("img");
    oimg.src=json[i].url; //賦值路徑 
    //經過實際值計算顯示高度 
    oimg.height=(json[i].h/json[i].w)*iw; 
    obj.appendChild(oimg);
    obj.style.left=x*w+"px";//left來自最小索引*基本寬
    obj.style.top=arr_h[x]+"px";//top來自最小索引位置值
    box.appendChild(obj);
    arr_h[x]=arr_h[x]+obj.offsetHeight+10;//存放變化後當前高度
   };   
  };  
 };
 //後臺拿來的數據
 var json1=[
  {url:"images/1.png",w:70,h:120},
  {url:"images/2.png",w:98,h:108},
  {url:"images/3.png",w:106,h:145},
  {url:"images/4.png",w:185,h:116},
  {url:"images/12.png",w:150,h:100},
  {url:"images/11.png",w:150,h:187},
  {url:"images/10.png",w:148,h:132},
  {url:"images/9.png",w:152,h:110},
  {url:"images/8.png",w:109,h:123},
  {url:"images/7.png",w:95,h:142},
  {url:"images/6.png",w:148,h:114},
  {url:"images/5.png",w:188,h:107},
  {url:"images/2.png",w:98,h:108},
  {url:"images/3.png",w:106,h:145},
  {url:"images/1.png",w:70,h:120},
  {url:"images/4.png",w:185,h:116},
  {url:"images/12.png",w:150,h:100},
  {url:"images/11.png",w:150,h:187},
  {url:"images/10.png",w:148,h:132},
  {url:"images/9.png",w:152,h:110},
  {url:"images/8.png",w:109,h:123},
  {url:"images/7.png",w:95,h:142},
  {url:"images/6.png",w:148,h:114},
  {url:"images/5.png",w:188,h:107},
  {url:"images/2.png",w:98,h:108},
  {url:"images/3.png",w:106,h:145},
  {url:"images/1.png",w:70,h:120},
  {url:"images/4.png",w:185,h:116},
  {url:"images/11.png",w:150,h:187},
  {url:"images/10.png",w:148,h:132},
  {url:"images/9.png",w:152,h:110},
  {url:"images/8.png",w:109,h:123},
  {url:"images/7.png",w:95,h:142},
 ];
 append(json1,true,row_x);//初始化
 //滾動到最低部判斷程序 
 window.onscroll=function(){
  var page_real_h=document.documentElement.scrollHeight;//頁面真實高
  var page_see_h=document.documentElement.clientHeight;//頁面可見高
  var bot=page_real_h-page_see_h;//到最底部值
  var xtop=document.documentElement.scrollTop||document.body.scrollTop;////獲取時時滾動值,兼容谷歌
  if(xtop==bot){//到最底部
   setTimeout(function(){
    //ajax請求哪來的數據
    var json_ajax=[    
     {url:"images/4.png",w:185,h:116},
     {url:"images/12.png",w:150,h:100},
     {url:"images/11.png",w:150,h:187},
     {url:"images/10.png",w:148,h:132},
     {url:"images/9.png",w:152,h:110},
     {url:"images/8.png",w:109,h:123},
     {url:"images/7.png",w:95,h:142},
     {url:"images/6.png",w:148,h:114},
     {url:"images/5.png",w:188,h:107},
     {url:"images/2.png",w:98,h:108},
     {url:"images/3.png",w:106,h:145},
     {url:"images/1.png",w:70,h:120},
     {url:"images/4.png",w:185,h:116},
     {url:"images/11.png",w:150,h:187},
     {url:"images/10.png",w:148,h:132},
     {url:"images/9.png",w:152,h:110},
     {url:"images/8.png",w:109,h:123},
     {url:"images/7.png",w:95,h:142},
    ];
    json1=json1.concat(json_ajax);//保存追加記錄
    append(json_ajax,false,0);//插入16個圖片
   },800);
  }else{};
 };
 
 window.onresize=function(){
  box.innerHTML="";
  box_w=box.offsetWidth;//獲取容易寬
  //向下取整，獲取一行個數
  row_x=Math.floor(box_w/w);
  arr_h=[];//保存一行個數高度  
  append(json1,true,row_x);//初始化
 };
 
};
</script>
</html>

最終實例下載地址：http://www.oschina.net/code/snippet_2352644_55042

五.css3多欄屬性實現瀑布流

咱們上面都是js的實現，js的處理咱們含有不少計算處理，相對耗內存，咱們css3的出現，尤爲是多欄屬性，在不考慮低級瀏覽器狀況的，這種實現就是福音。

-moz-columns:240px;
-webkit-columns:240px;
columns:240px;

設置一欄寬度爲240px，那麼咱們的box就會被按這個分割：

咱們的box就和刀切同樣，每一條都是240px大小，切完之後，下面的子元素就會把切完的做爲佈局容器去防止進去，如圖同樣，咱們子元素都是240px的，都以切好的每一欄作容器插進去，就實現了瀑布流效果。並且多欄設置後下面子元素是按照css3的算法佈局，很是的快。

下面是去所有代碼，簡單優雅，無延時顯示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>瀑布流</title>
    <style type="text/css">
/*reset*/
*{ padding:0; margin:0}
body{ height: 100%; width: 100%; font-size:12px; color:#333;}
ul{ list-style:none;}
/*demo*/
#box{ width:80%;margin:50px auto;border-top:5px solid #ddd;
-moz-columns:240px;
-webkit-columns:240px;
columns:240px;
}
#box div{ width:240px; margin-bottom:10px;}
#box div img{ display:block;border:1px solid #ddd; width:220px; margin:0 8px;}
</style>
</head>
<body>
    <!--瀑布流-->
    <div id="box">
     <div><img src="images/1.png"></div>
        <div><img src="images/2.png"></div>
        <div><img src="images/3.png"></div>
        <div><img src="images/4.png"></div>
        <div><img src="images/5.png"></div>
        <div><img src="images/9.png"></div>
        <div><img src="images/10.png"></div>
        <div><img src="images/3.png"></div>
        <div><img src="images/4.png"></div>
        <div><img src="images/5.png"></div>
        <div><img src="images/6.png"></div>
        <div><img src="images/7.png"></div>
        <div><img src="images/8.png"></div>
        <div><img src="images/9.png"></div>
        <div><img src="images/10.png"></div>
        <div><img src="images/3.png"></div>
        <div><img src="images/4.png"></div>
        <div><img src="images/5.png"></div>
        <div><img src="images/6.png"></div>
        <div><img src="images/7.png"></div>
    </div>
    
</body>
<script type="text/javascript">
window.onload=function(){
 //瀑布流
 var box=document.getElementById("box"); 
 function append(json){  
  var len=json.length;//獲取個數
  
  for(var i=0;i<len;i++){
   //插入處理
   var obj=document.createElement("div");
   var oimg=document.createElement("img");
   oimg.src=json[i].url; //賦值路徑 
   obj.appendChild(oimg);
   box.appendChild(obj);
  };     
 };
 //滾動到最低部判斷程序 
 window.onscroll=function(){
  var page_real_h=document.documentElement.scrollHeight;//頁面真實高
  var page_see_h=document.documentElement.clientHeight;//頁面可見高
  var bot=page_real_h-page_see_h;//到最底部值
  var xtop=document.documentElement.scrollTop||document.body.scrollTop;////獲取時時滾動值,兼容谷歌
  if(xtop==bot){//到最底部
   setTimeout(function(){
    //ajax請求哪來的數據
    var json_ajax=[    
     {url:"images/4.png",w:185,h:116},
     {url:"images/12.png",w:150,h:100},
     {url:"images/11.png",w:150,h:187},
     {url:"images/10.png",w:148,h:132},
     {url:"images/9.png",w:152,h:110},
     {url:"images/8.png",w:109,h:123},
     {url:"images/7.png",w:95,h:142},
     {url:"images/6.png",w:148,h:114},
     {url:"images/5.png",w:188,h:107},
     {url:"images/2.png",w:98,h:108},
     {url:"images/3.png",w:106,h:145},
     {url:"images/1.png",w:70,h:120},
     {url:"images/4.png",w:185,h:116},
     {url:"images/11.png",w:150,h:187},
     {url:"images/10.png",w:148,h:132},
     {url:"images/9.png",w:152,h:110},
     {url:"images/8.png",w:109,h:123},
     {url:"images/7.png",w:95,h:142},
    ];
    append(json_ajax);//插入16個圖片
   },800);
  }else{};
 };
 
 
};
</script>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。