首页 > 代码库 > 瀑布流布局

瀑布流布局

效果如图:

HTML代码结构:

<!DOCTYPE html><html><head><meta http-equiv="Countent-Type" content="text/html;charset=UTF-8"><title></title><link rel="stylesheet" type="text/css" href="style.css"></head><body>    <div id="main">        <div class="box">            <div class="imgCom">                <img src="images/1.jpg">            </div>        </div>        <div class="box">            <div class="imgCom">                <img src="images/2.jpg">            </div>        </div>        <div class="box">            <div class="imgCom">                <img src="images/3.jpg">            </div>        </div>        <div class="box">            <div class="imgCom">                <img src="images/4.jpg">            </div>        </div>        <div class="box">            <div class="imgCom">                <img src="images/5.jpg">            </div>        </div>                <div class="box">            <div class="imgCom">                <img src="images/6.jpg">            </div>        </div>        <div class="box">            <div class="imgCom">                <img src="images/7.jpg">            </div>        </div>                <div class="box">            <div class="imgCom">                <img src="images/8.jpg">            </div>        </div>        <div class="box">            <div class="imgCom">                <img src="images/9.jpg">            </div>        </div>        <div class="box">            <div class="imgCom">                <img src="images/10.jpg">            </div>        </div>        <div class="box">            <div class="imgCom">                <img src="images/11.jpg">            </div>        </div>        <div class="box">            <div class="imgCom">                <img src="images/12.jpg">            </div>        </div>        <div class="box">            <div class="imgCom">                <img src="images/13.jpg">            </div>        </div>        <div class="box">            <div class="imgCom">                <img src="images/14.jpg">            </div>        </div>        <div class="box">            <div class="imgCom">                <img src="images/15.jpg">            </div>        </div>                <div class="box">            <div class="imgCom">                <img src="images/16.jpg">            </div>        </div>        <div class="box">            <div class="imgCom">                <img src="images/17.jpg">            </div>        </div>        <div class="box">            <div class="imgCom">                <img src="images/18.jpg">            </div>        </div>        <div class="box">            <div class="imgCom">                <img src="images/19.jpg">            </div>        </div>        <div class="box">            <div class="imgCom">                <img src="images/20.jpg">            </div>        </div>        <div class="box">            <div class="imgCom">                <img src="images/21.jpg">            </div>        </div>        <div class="box">            <div class="imgCom">                <img src="images/22.jpg">            </div>        </div>            </div></body></html>
*{ padding: 0; margin: 0;}#main{ position: relative;}.box{ padding: 15px 0 0 15px; float: left; width: 230px; }.imgCom{ border: 1px solid #ccc; border-radius: 4px; box-shadow: 0px 0px 4px #ccc;}.imgCom img{ display: block; padding: 15px;}

一,用原生js来写:

window.onload=function(){    waterfall("main","box");    //模拟后台数据加载    var dataInt={"data":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src":"10.jpg"},{"src":"11.jpg"},{"src":"12.jpg"}]}    window.onscroll=function(){        if(checkScrollSlide){            var oPartent=document.getElementById("main");            for(var i=0;i<dataInt.data.length;i++){                var oBox=document.createElement("div");//创建一个div元素                oBox.className="box";                oPartent.appendChild(oBox);                var oImgCom=document.createElement("div");                oImgCom.className="imgCom";                oBox.appendChild(oImgCom);                var oImg=document.createElement("img");                oImg.src="images/"+dataInt.data[i].src;                oImgCom.appendChild(oImg);            }            waterfall("main","box");        }    }}//瀑布流基础设置function waterfall(partent,box){        var oPartent=document.getElementById(partent);    var oBoxs=getByClass(oPartent,box);    //计算整个页面显示的列数(页面宽度/box宽度 *取整)    var oBoxW=oBoxs[0].offsetWidth;    var cols=Math.floor(document.documentElement.clientWidth/oBoxW);    //设置main的宽    oPartent.style.cssText="width:"+cols*oBoxW+"px; margin:0px auto; padding-right:15px;"    var hArr=[];//存放每一列高度的数组    for(var i=0;i<oBoxs.length;i++){        if(i<cols){            hArr.push(oBoxs[i].offsetHeight);//存储第一行的高度            }        else{            var minH=Math.min.apply(null,hArr);//获取第一行高度最小的值            var index=getMinhIndex(hArr,minH);            oBoxs[i].style.position="absolute";            oBoxs[i].style.top=minH+"px";            oBoxs[i].style.left=oBoxW*index+"px";            // oBoxs[i].style.left=oBoxs[index].offsetLeft+"px";            hArr[index]+=oBoxs[i].offsetHeight;//更新添框快后的列高        }    }}//获取数组中某值的索引function getMinhIndex(arr,val){    for(var i in arr){        if(arr[i]==val){            return i;        }    }}//将main下的所有class为box的元素取出来function getByClass(partent,clsName){    var boxArr=new Array(),//用来存储获取到的所有class为box的元素    oElement=partent.getElementsByTagName("*");//获取之下的所有元素    for(var i=0;i<oElement.length;i++){        if(oElement[i].className==clsName){            boxArr.push(oElement[i]);//存储到数组中        }    }    return boxArr;}//检查滚动条是否具备了加载数据块的条件function checkScrollSlide(){    var oPartent=document.getElementById("main");    var oBoxs=getByClass(oPartent,"box");    var lastBoxH=oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length].offsetHeight/2);//最后一块距离顶部高度+自身的一半高度    var scrollH=document.body.scrollTop||document.documentElement.scrollTop;//滚动的高度    var winH=document.body.clientHeight||document.documentElement.clientHeight;    return (lastBoxH-scrollH<winH)?true:false;}

二,用jquery框架来写

$(function(){    waterfall("#main",".box");    var dataInt={"data":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src":"10.jpg"},{"src":"11.jpg"},{"src":"12.jpg"}]}    $(window).scroll(function(){        if(checkScrollSlide){            for(var i=0;i<dataInt.data.length;i++){            $("#main").append("<div class=‘box‘><div class=‘imgCom‘><img src=http://www.mamicode.com/‘images/"+dataInt.data[i].src+"‘/></div></div>")            }            waterfall("#main",".box");        }    })})//瀑布流基础设置function waterfall(parent,box){    var oBoxw=$(box).width()+15;    var cols=parseInt($(window).width()/oBoxw);//计算整个页面显示的列数(页面宽度/box宽度 *取整)    $(parent).css({"width":cols*oBoxw,"margin":"0 auto","padding-left":"15px"});    var hArr=[];//存放每一列的高度    for(i=0;i<$(box).length;i++){        if(i<cols){                hArr.push($(box).eq(i).height()+15);        }        else{            var minH=Math.min.apply(null,hArr);//获取第一行高度最小的值            var index=getMinHIndex(hArr,minH);//获取该值在数组中的索引            $(box).eq(i).css({"position":"absolute","top":minH,"left":oBoxw*index+15});            hArr[index]+=$(box).eq(i).height()+15;        }    }}//获取数组中某值的索引function getMinHIndex(arr,val){    for(var i=0;i<arr.length;i++){        if(arr[i]==val){            return i;        }    }}//检查滚动条是否具备了加载数据块的条件function checkScrollSlide(){    var lastH=($(".box:last").height()+15)/2+$(".box:last").offset().top;//最后一块距离顶部高度+自身的一半高度    var windH=$(window).height();    var scrollH=$(document).scrollTop();//滚动的高度    return (lastH-scrollH<windH)?true:false;}

三、用css3来写:

待续......

瀑布流布局