瀑布流照片墙布局

---

title: 瀑布流照片墙布局

瀑布流概念

• 瀑布流布局是错落式的布局方式。它有一个特点，整个布局以列为单位，下一个区块总是放在总高度最短的那一列的下面。

实现

• html代码块

    <ul id="pics">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

• css代码块

    *{margin:0;padding:0};
    #pics{list-style: none;margin: 30px auto;width: 1080px;}
    #pics li{float: left;width: 250px;margin: 10px;}
    #pics li div{width: 210px;padding: 10px;border: 1px solid gray;margin-bottom: 20px;}
    #pics li div img{width: 200px;}

• js代码块

    //运用ajax获取图片地址

    //获取页面元素(组件/控件)
    let lis=document.getElementById("pics").getElementsByTagName("li");

    //接收服务器数据
    function fn(data){
        //遍历所有数据
        for(let i in data){
            let oDiv=document.createElement("div");
            let oImg=document.createElement("img");
            let oP=document.createElement("p");
            //将接收的数据放到页面组件中
            oImg.src=data[i].preview; //缩略图
            oP.innerHTML=data[i].title;  //标题
            //将oImg和oP放到oDiv中
            oDiv.appendChild(oImg);
            oDiv.appendChild(oP);
            //按一定的规律将图片放入到li中
            switch(i%4){
                case 0:
                    lis[0].appendChild(oDiv);
                break;
                case 1:
                    lis[1].appendChild(oDiv);
                break;
                case 2:
                    lis[2].appendChild(oDiv);
                break;
                case 3:
                    lis[3].appendChild(oDiv);
                break;
                default:
                    lis[0].appendChild(oDiv);
                break;
            }

        }
        
    }

    //pageIndex表示页码
    let pageIndex=1;
    let JSONP=document.creatElement("script");
    JSONP.type='text/javaScript';
    //src表示地址 fn表示回调函数
    JSONP.src="http://www.wookmark.com/api/json/popular?page='+pageIndex+'&callback=fn";
    document.body.appendChild(JSONP);

• 这种方式实现的效果是每个列的元素内的图片数量是一致的，如果某一列高度图片过高，那么就会出现最后的效果是参差不齐的。如果在加载下一页，效果就会更加不好，会存在一个又一个的窟窿，这显然是和我们想要的效果是不一致的。那样这就需要我们队代码进行一定的更改。
  代码如下：

    //获取页面元素(组件/控件)
    let lis=document.getElementById("pics").getElementsByTagName("li");
    //pageIndex表示页码
    let pageIndex=1;
    let isLoaded=false;
    loadData();//加载数据

    //滚动事件
    window.onscroll=function(){
        var index=getMinHeight();//最短列的索引
        // console.log(document.documentElement.scrollTop);//滚动距离
        //滚动高度
        var h1=document.documentElement.scrollTop;
        var h2=document.documentElement.clientHeight;//视口高度
        var h3=lis[index].offsetHeight;//最短列高度
        if(h1+h2>h3){
            //加载下一页
            pageIndex++;
            if(isLoaded){
                loadData(); 
            }
        }
    };
    
    //接收服务器数据
    function fn(data){
        //遍历所有数据
        for(let i in data){
            let oDiv=document.createElement("div");
            let oImg=document.createElement("img");
            let oP=document.createElement("p");
            //将接收的数据放到页面组件中
            oImg.src=data[i].preview; //缩略图preview表示图片路径
            oP.innerHTML=data[i].title;  //标题title表示图片标题
            //将oImg和oP放到oDiv中
            oDiv.appendChild(oImg);
            oDiv.appendChild(oP);

            //设置div预留高度
            var oH=(data[i].height/data[i].width)*220+80+'px';
            oDiv.style.height=oH;
            oDiv.appendChild(oImg);
            oDiv.appendChild(oP);
            //计算 上一次存放后，所有列中最短列
            //将图片放置在最短的列中
            var index=getMinHeight();
            lis[index].appendChild(oDiv);
        }
        isLoaded=true;//加载完毕
        
    };
    //获取最短列
    function getMinHeight(){
        let minIndex=0;     //假设第一列最短 最短列索引
        //取出最短列的高度
        let mHieght=lis[minIndex].offsetHeight;
        for(let i=0;i<lis.length;i++){
            if(lis[i].offsetHeight<mHieght){
                mHieght=lis[i].offsetHeight;    //将高度短的列的高度保存起来
                minIndex=i; //将短的列的索引保存起来
            }
        }
        return minIndex;
    };
    
    function loadData(){
        isLoaded=false;//正在加载   
        let JSONP=document.creatElement("script");
        JSONP.type='text/javaScript';
        //src表示地址路径大家可以自己定义 fn表示回调函数
        JSONP.src="http://www.----?page='+pageIndex+'&callback=fn";
        document.body.appendChild(JSONP);
    }
    

• 最后还需要提醒大家一点，本篇文章中的例子仅供参考学习，是用于帮助大家理解瀑布流布局的，切误将本篇文章中的代码直接使用在正式项目当中。希望以上代码对大家有所帮助。