瀑布流的实现方法

瀑布流布局
国外：Pinterest
国内：花瓣

1.js方法
2.jq方法
3.css3多栏布局

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="main">
        <div class="box">
            <div class="pic">
                <img src="../images/0.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../images/1.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../images/2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../images/3.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../images/4.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../images/5.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../images/6.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../images/7.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../images/8.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../images/9.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../images/10.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../images/11.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../images/12.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../images/13.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../images/14.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../images/15.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../images/16.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../images/17.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../images/18.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../images/19.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../images/20.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../images/21.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../images/22.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../images/23.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../images/24.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../images/25.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../images/26.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../images/27.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../images/28.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../images/29.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../images/30.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../images/31.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../images/32.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../images/33.jpg" alt="">
            </div>
        </div>
    </div>
    <script type="text/javascript" src="js/script.js"></script>
</body>
</html>

style.css

*{
    margin: 0;
    padding: 0;
}
#main{
    position: relative;
}
.box{
    padding: 15px 0 0 15px;
    float: left;
}
.pic{
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 0 5px #ccc;
}
.pic img{width: 165px;height: auto}

javascript:script.js

window.onload=function(){
    waterfall('main','box');
}

function waterfall(parent,box){
    //取出所有main下所有的class为box的元素
    var oParent = document.getElementById(parent);
    var oBoxs=getByClass(oParent,box);
    console.log("oboxs:"+oBoxs.length);
    // 计算需要显示的列数(页面宽度/box宽度)
    var oBoxWidth = oBoxs[0].offsetWidth;
    console.log("oBoxWidth:"+oBoxWidth);
    var cols= Math.floor(document.documentElement.clientWidth/oBoxWidth);
    console.log("cols:"+cols);
    //设置main宽度
    oParent.style.cssText='width:'+oBoxWidth*cols+"px;margin:0 auto;";
    var hArr=[];//存放每一列高度的数组
    for(var i=0;i<oBoxs.length;i++){
        if(i<cols){
            hArr.push(oBoxs[i].offsetHeight);
        }
        else{

            var minheight = Math.min.apply(null,hArr);
            console.log(minheight);
            var index=getMinheightIndex(hArr,minheight);
            oBoxs[i].style.position="absolute";
            oBoxs[i].style.top=minheight+"px";
            // oBoxs[i].style.left=oBoxWidth*index+"px";
            oBoxs[i].style.left=oBoxs[index].offsetLeft+"px";
            hArr[index]+=oBoxs[i].offsetHeight;
        }


    }
    console.log("oBoxsHeight:"+hArr);
}

//根据class获取元素
function getByClass(parent,clsName){
    var boxArr=new Array(); //存储所有class为box的元素
    oElements = parent.getElementsByTagName('*')
    for(var i =0;i<oElements.length;i++){
        if(oElements[i].className==clsName){
            boxArr.push(oElements[i])
        }
    }
    return boxArr
}
function getMinheightIndex(arr,val){
    for (var i in arr)
        if (arr[i]==val){
            return i;
        }
}

jquery:script.js

$(window).on('load',function(){
    waterfall();
    var dataInt ={"data":[{"src":"0.jpg"},{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"}]}
    $(window).on('scroll',function(){
        if(checkScrollSlide){
            $.each(dataInt.data,function(key,value){
                console.log(value);
                var oBox=$('<div>').addClass('box').appendTo($("#main"));
                var oPic=$('<div>').addClass('pic').appendTo($(oBox));
                $('<img>').attr('src',"images/"+$(value).attr("src")).appendTo($(oPic));
            })
            waterfall();
        }
    })
   
})

function waterfall(){
    var $boxs=$('#main>div');
    var percolwidth= $boxs.eq(0).outerWidth();
    var cols = Math.floor($(window).width()/percolwidth);
    $('#main').width(cols*percolwidth).css('margin','0 auto');
    var hArr=[];
    $boxs.each(function(index, val) {
         /* iterate through array or object */
         // console.log(index)
         // console.log(val)
         var h = $boxs.eq(index).outerHeight();
         if(index<cols){
            hArr[index]=h
         }
         else{
            var minheight = Math.min.apply(null,hArr);
            var minheightIndex = $.inArray(minheight,hArr);
            $(val).css({
                'position':'absolute',
                'top':minheight+"px",
                'left':percolwidth*minheightIndex+"px"
            });
            // hArr[minheightIndex]+=$boxs.eq(index).outerHeight()
            hArr[minheightIndex]+=h
        }
    });
    console.log(hArr)
}

function checkScrollSlide(){
    var $lastBox=$("#main>div").last();
    var lastBoxDis = $lastBox.offset().top+Math.floor($lastBox.outerHeight()/2);
    var scrollTop=$(window).scrollTop();
    var documentHeight = $(window).height();
    return (lastBoxDis<scrollTop+documentHeight)?true:false;
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容