瀑布流的简单制作

思路：

1、判断页面的宽度，根据页面宽度插入一定数量的div作为容器

2、根据图片等数据存放的数组生成构成瀑布流的元素

3、判断每一个容器的高度，在高度最小的一个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();
        

 

 

 

运行结果：

 

转载于:https://www.cnblogs.com/h-kj9527/p/11536597.html