瀑布流的简单制做

思路：

一、判断页面的宽度，根据页面宽度插入必定数量的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(); 

 

 

 

运行结果：