瀑布流的簡單製做

思路：

一、判斷頁面的寬度，根據頁面寬度插入必定數量的div做爲容器

二、根據圖片等數據存放的數組生成構成瀑布流的元素

三、判斷每個容器的高度，在高度最小的一個div中插入新生成的元素

注意：必定要給內部的圖片加上onload事件，不然會由於圖片加載未完成影響高度的判斷

 

css部分（樣式隨便寫寫就好）

 1  .all{
 2  margin: 0 auto;
 3  display: flex;
 4  justify-content: space-around;
 5             }
 7  .all>div{
 8  width: 260px;
 9  display: table;
10             }
12  .active{
13  margin-top: 20px;
14  width: 220px;
15  padding: 10px;
16  border: #555555 1px solid;
17  position: relative;
18  background: white;
19             }
21  .active h3{
22  font-size: 16px;
23             }
25  .active p{
26  font-size: 14px;
27  color: #666666;
28  margin-bottom: 20px;
29             }
31  .active p span{
32  color: #AAAAAA;
33             }
35  .active p a{
36  font-weight: bold;
37  color: #222222;
38  text-decoration: none;
39             }
41  .active div{
42  font-size: 14px;
43  width: 40%;
44  display: flex;
45  padding: 0 10px;
46  justify-content: space-between;
47  color: #AAAA00;
48  position: absolute;
49  bottom: 10px;
50  right:0 ;
51             }
53  .active img{
54  width: 100%;
55             }
56             

 

 

結構部分

 

 

 

 

js部分（主要內容）

 

//數據部分
var data=[{ img:"圖片的地址", name:"李世民", liyou:"理由" }......];  //構造函數部分 function Fid(){ this.all=document.querySelector(".all"); this.div=document.querySelectorAll(".all>div"); this.shell(); }  //根據屏幕的寬度判斷當前頁面瀑布流的列數 Fid.prototype.shell=function(){ var w=document.documentElement.clientWidth;　　　　 this.all.style.width=Math.floor(w/this.div[0].offsetWidth)*this.div[0].offsetWidth+"px";　　//根據能放入的列數設置頁面的寬度，方便進行居中
            for(var i=1;i<Math.floor(w/this.div[0].offsetWidth);i++){
                var div=document.createElement("div");　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//生成幾個大的div用來盛放每一列的內容 this.all.appendChild(div); } this.load(); } Fid.prototype.load=function(){ this.index=1;　　　　　　　　　　　　　　　　　　　　　　　　//設置一個索引，用來進行分頁顯示 this.generate();　　　　　　　　　　　　　　　　　　　　　　//初始調用，用於剛剛加載顯示第一頁 var that=this; this.kg=true;　　　　　　　　　　　　　　　　　　　　　　　　//設置一個開關，控制滾動事件不會觸發屢次導致一下加載多頁內容 window.onscroll=function(){ var keshih=document.documentElement.clientHeight; var scrollt=document.documentElement.scrollTop; var scrollh=document.documentElement.scrollHeight; if(keshih+scrollt>scrollh-500&&that.kg){　　　　　　　　　　//判斷開關是否爲「開」的狀態，同時判斷滾動條是否接近底部 that.index++;　　　　　　　　　　　　　　　　　　　　　　//索引變化，加載後面的內容 that.kg=false;　　　　　　　　　　　　　　　　　　　　　　//調整開關狀態 that.generate(); } } } Fid.prototype.generate=function(){ this.div=document.querySelectorAll(".all>div"); for(var i=0;i<this.div.length;i++) this.div[i].num=i;　　　　　　　　　　　　　　　　　　　　//給每一個容器加一個不可見屬性，用於後面方便使用 for(var j=(this.index-1)*20;j<this.index*20;j++){　　　　//分頁操做，一次加載20個內容 if(j>=data.length)break;　　　　　　　　　　　　　　　　　//進行判斷，最大加載數量不超過數據data的長度 let dd=document.createElement("div"); dd.className="active";　　　　　　　　　　　　　　　　//生成div並給每一個div加個樣式，內部填充內容 dd.innerHTML=`<img src="${data[j].img}" alt="##">
　　　　　　　　　　　　　　　　　　　　　　<h3>${data[j].name}</h3>
　　　　　　　　　　　　　　　　　　　　　　<p>
　　　　　　　　　　　　　　　　　　　　　　　　　<span>理由：</span>${data[j].liyou}
　　　　　　　　　　　　　　　　　　　　　　　　　<a href="##">查看詳情</a>
　　　　　　　　　　　　　　　　　　　　　　</p>
　　　　　　　　　　　　　　　　　　　　　　<div>
　　　　　　　　　　　　　　　　　　　　　　　　　<i class="icon-heart">贊</i>
　　　　　　　　　　　　　　　　　　　　　　　　　<i class="icon-bubble2">評論</i>
　　　　　　　　　　　　　　　　　　　　　　</div>`;
                    var oimg=dd.querySelector("img"); oimg.onload=()=>{　　　　　　　　　　　　　　　　　　　　//最關鍵的部分，給圖片加上加載事件 var c=0; var min=this.div[0].offsetHeight; for(x=0;x<this.div.length;x++){　　　　　　　　　　　　//圖片加載完成判斷容器高度，將最短的容器標記出來 if(min>this.div[x].offsetHeight){ c=this.div[x].num; } this.div[c].appendChild(dd);　　　　　　　　//插入元素，瀑布流完成 } } } setTimeout(()=>{　　　　　　　　　　　　　　　　//插入完成後50毫秒將開關狀態恢復初始 this.kg=true; },50) }  //若是未使用圖片的加載事件，也可使用延時器來給圖片一個加載的時間，不過不一樣計算機加載時間不盡相同，並且又是延遲太高會致使圖片仍是加載不完成，不建議使用延時器
　　　　　//延時器方法還有一個缺點就是每次加載內容都會延時指定時間
 // Fid.prototype.panduan=function(dd){
        // setTimeout(()=>{
        // var c=0;
        // var min=this.div[0].offsetHeight;
        // for(x=0;x<this.div.length;x++){
        // if(min>this.div[x].offsetHeight){
        // c=this.div[x].num;
        // }
        // }
        // this.div[c].appendChild(dd);
        // this.kg=true;
        // },300);
        // }
        
        
        new Fid(); 

 

 

 

運行結果：