扒一扒瀑布流布局的几种实现

  自Pinterest首次使用瀑布流式布局,现在这种页面布局已经得到了非常广泛的应用,比如蘑菇街、美丽说等各类购物网站,图丽网等美女图片展示网站等。
现在我们扒一扒瀑布流的几种实现方式(今天在公司加班到10点才回,眼睛好累,代码先不写注解了,有时间再补上,感兴趣的同学可以自己敲着看看效果):
一、css3
    实现原理:使用css3的多列属性(column),优点是实现起来比较简单,缺点是兼容性不太好。
    上代码:
  
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>waterFall01-css多列</title>
    <style>
        html,body{
            margin:0;
            padding: 0;
        }
        #container{
            column-width:250px;/*列宽*/
            -webkit-column-width:250px;
            -moz-column-width:250px;
            column-gap:5px;/*列间距*/
            -webkit-column-gap:5px;
            -moz-column-gap:5px;
        }
        .item{
            margin:5px 0;/*因为左右有gap*/
            padding:10px;
            border: 1px solid #ccc;
            box-shadow: 0 0 6px #ccc;
            border-radius: 5px;
        }
        .item img{
            width: 100%;
        }
        .item p{
            text-align: center;
            font-family: Microsoft Yahei;
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="item"><img src="images/01/img (1).jpg" alt=""></div>
        <div class="item"><img src="images/01/img (2).jpg" alt=""></div>
        <div class="item"><img src="images/01/img (3).jpg" alt=""><p>描述信息</p></div>
        <div class="item"><img src="images/01/img (4).jpg" alt=""></div>
        <div class="item"><img src="images/01/img (5).jpg" alt=""></div>
        <div class="item"><img src="images/01/img (6).jpg" alt=""></div>
        <div class="item"><img src="images/01/img (7).jpg" alt=""></div>
        <div class="item"><img src="images/01/img (8).jpg" alt=""></div>
        <div class="item"><img src="images/01/img (9).jpg" alt=""></div>
        <div class="item"><img src="images/01/img (10).jpg" alt=""></div>
        <div class="item"><img src="images/01/img (11).jpg" alt=""></div>
        <div class="item"><img src="images/01/img (12).jpg" alt=""></div>
        <div class="item"><img src="images/01/img (13).jpg" alt=""></div>
        <div class="item"><img src="images/01/img (14).jpg" alt=""></div>
        <div class="item"><img src="images/01/img (15).jpg" alt=""></div>
        <div class="item"><img src="images/01/img (16).jpg" alt=""></div>
        <div class="item"><img src="images/01/img (17).jpg" alt=""></div>
        <div class="item"><img src="images/01/img (18).jpg" alt=""></div>
        <div class="item"><img src="images/01/img (19).jpg" alt=""></div>
        <div class="item"><img src="images/01/img (20).jpg" alt=""></div>
        <div class="item"><img src="images/01/img (21).jpg" alt=""></div>
        <div class="item"><img src="images/01/img (22).jpg" alt=""></div>
        <div class="item"><img src="images/01/img (23).jpg" alt=""><p>描述信息</p></div>
        <div class="item"><img src="images/01/img (21).jpg" alt=""></div>
        <div class="item"><img src="images/01/img (22).jpg" alt=""></div>
        <div class="item"><img src="images/01/img (23).jpg" alt=""><p>描述信息</p></div>
        <div class="item"><img src="images/01/img (1).jpg" alt=""></div>
        <div class="item"><img src="images/01/img (2).jpg" alt=""></div>
        <div class="item"><img src="images/01/img (3).jpg" alt=""></div>
        <div class="item"><img src="images/01/img (9).jpg" alt=""><p>描述信息</p></div>
        <div class="item"><img src="images/01/img (4).jpg" alt=""></div>
        <div class="item"><img src="images/01/img (5).jpg" alt=""></div>
        <div class="item"><img src="images/01/img (9).jpg" alt=""><p>描述信息</p></div>
        <div class="item"><img src="images/01/img (20).jpg" alt=""></div>
        <div class="item"><img src="images/01/img (11).jpg" alt=""></div>
        <div class="item"><img src="images/01/img (19).jpg" alt=""></div>
        <div class="item"><img src="images/01/img (13).jpg" alt=""></div>
        <div class="item"><img src="images/01/img (15).jpg" alt=""></div>
        <div class="item"><img src="images/01/img (14).jpg" alt=""></div>
        <div class="item"><img src="images/01/img (16).jpg" alt=""></div>
        <div class="item"><img src="images/01/img (21).jpg" alt=""></div>
        <div class="item"><img src="images/01/img (17).jpg" alt=""></div>
        <div class="item"><img src="images/01/img (18).jpg" alt=""></div>
        <div class="item"><img src="images/01/img (12).jpg" alt=""></div>
        <div class="item"><img src="images/01/img (9).jpg" alt=""><p>描述信息</p></div>
        <div class="item"><img src="images/01/img (10).jpg" alt=""></div>
        <div class="item"><img src="images/01/img (6).jpg" alt=""></div>
        <div class="item"><img src="images/01/img (7).jpg" alt=""></div>
        <div class="item"><img src="images/01/img (8).jpg" alt=""></div>
    </div>
</body>
</html>

 

 

二、JavaScript
   实现原理:原生js操作dom,动态插入新图片
  上代码:
  
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>waterFall02</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #main{
            position: relative;;
        }
        .item{
            padding: 15px 0 0 15px;
            float: left;
        }
        .box{
            padding: 10px;
            border: 1px solid #ccc;
            box-shadow: 0 0 6px #ccc;
            border-radius: 5px;
        }
        .box img{
            width:162px;
        }
    </style>
    <script>
        window.onload = function(){
            waterFall("#main",".item");
            var fakeData = {'data':[{'src':'img (1).jpg'},{'src':'img (2).jpg'},{'src':'img (3).jpg'},{'src':'img (5).jpg'},{'src':'img (9).jpg'},{'src':'img (4).jpg'},{'src':'img (6).jpg'},{'src':'img (7).jpg'}]};
            window.onscroll = function(){
                if(checkScroll()){
                    var oParent = g("#main"), oItem, oBox, oImg;
                    for(var i = 0;i < fakeData.data.length; i++){
                        oItem = c("div");
                        oItem.className = "item";
                        oParent.appendChild(oItem);
                        oBox = c("div");
                        oBox.className = "box";
                        oItem.appendChild(oBox);
                        oImg = c("img");
                        oImg.src = "images/01/" + fakeData.data[i].src;
                        oBox.appendChild(oImg);
                    }
                    waterFall("#main",".item");
                }
            }
        };
        function g(selector){
            return selector.substr(0,1) === "#" ? 
                document.getElementById(selector.substr(1)) : document.getElementsByClassName(selector.substr(1));
        }
        function c(ele){
            return document.createElement(ele);
        }
        function waterFall(parent, item){
            var oParent = g(parent);
            var items = g(item);
            var iWidth = items[0].offsetWidth;
            var cols = Math.floor(document.documentElement.clientWidth / iWidth);
            oParent.style.cssText = "width:" + iWidth * cols +"px;margin: 0 auto;";

            var iHeightArr = [],iHeight, minH, minHIndex;
            for(var i = 0;i < items.length; i++){
                iHeight = items[i].offsetHeight;
                if(i < cols){
                    iHeightArr[i] = iHeight;
                }else{
                    minH = Math.min.apply(null,iHeightArr);
                    minHIndex = getMinHeightIndex(iHeightArr, minH);
                    items[i].style.position = "absolute";
                    items[i].style.top = minH + "px";
                    items[i].style.left = items[minHIndex].offsetLeft + "px";
                    iHeightArr[minHIndex] += items[i].offsetHeight;
                }
            }
        }

        var main = g("#main");

        /*
        *获取元素数组中最小高度元素的index
        */
        function getMinHeightIndex(arr, minHeight){
            for(var i =0;i < arr.length;i++){
                if(arr[i] === minHeight)
                    return i;
            }
            return -1;
        }

        function checkScroll(){
            var items = g(".item");
            var doc = document.documentElement, body = document.body;
            var lastItemHeight = items[items.length - 1].offsetTop + Math.floor(items[items.length - 1].offsetHeight /2);//最后一个item距离网页顶部+自身高度的一半,这样未滚到底就开始加载
            var scrollTop = doc.scrollTop || body.scrollTop;
            var documentHeight = doc.clientHeight;
            return lastItemHeight < scrollTop + documentHeight;
        }
    </script>
</head>
<body>
    <div id="main">
        <div class="item">
            <div class="box"><img src="images/01/img (1).jpg" alt=""></div>
        </div>
        <div class="item">
            <div class="box"><img src="images/01/img (2).jpg" alt=""></div>
        </div>
        <div class="item">
            <div class="box"><img src="images/01/img (3).jpg" alt=""></div>
        </div>
        <div class="item">
            <div class="box"><img src="images/01/img (4).jpg" alt=""></div>
        </div>
        <div class="item">
            <div class="box"><img src="images/01/img (5).jpg" alt=""></div>
        </div>
        <div class="item">
            <div class="box"><img src="images/01/img (6).jpg" alt=""></div>
        </div>
        <div class="item">
            <div class="box"><img src="images/01/img (7).jpg" alt=""></div>
        </div>
        <div class="item">
            <div class="box"><img src="images/01/img (8).jpg" alt=""></div>
        </div>
        <div class="item">
            <div class="box"><img src="images/01/img (9).jpg" alt=""></div>
        </div>
        <div class="item">
            <div class="box"><img src="images/01/img (10).jpg" alt=""></div>
        </div>
        <div class="item">
            <div class="box"><img src="images/01/img (11).jpg" alt=""></div>
        </div>
        <div class="item">
            <div class="box"><img src="images/01/img (12).jpg" alt=""></div>
        </div>
        <div class="item">
            <div class="box"><img src="images/01/img (13).jpg" alt=""></div>
        </div>
        <div class="item">
            <div class="box"><img src="images/01/img (14).jpg" alt=""></div>
        </div>
        <div class="item">
            <div class="box"><img src="images/01/img (15).jpg" alt=""></div>
        </div>
        <div class="item">
            <div class="box"><img src="images/01/img (16).jpg" alt=""></div>
        </div>
        <div class="item">
            <div class="box"><img src="images/01/img (17).jpg" alt=""></div>
        </div>
        <div class="item">
            <div class="box"><img src="images/01/img (18).jpg" alt=""></div>
        </div>
        <div class="item">
            <div class="box"><img src="images/01/img (19).jpg" alt=""></div>
        </div>
        <div class="item">
            <div class="box"><img src="images/01/img (20).jpg" alt=""></div>
        </div>
        <div class="item">
            <div class="box"><img src="images/01/img (21).jpg" alt=""></div>
        </div>
        <div class="item">
            <div class="box"><img src="images/01/img (22).jpg" alt=""></div>
        </div>
        <div class="item">
            <div class="box"><img src="images/01/img (23).jpg" alt=""></div>
        </div>
    </div>
</body>
</html>

 

三、jQuery
  实现原理:同上一种,用jQuery,只为简化dom操作代码
  上代码:
  
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>waterFall03</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            position: relative;
            float: left;
        }
        .content{
            padding: 10px;
            border: 1px solid #ccc;
            box-shadow: 0 0 5px #ccc;
            border-radius: 5px;
        }
        .content img{
            width: 180px;
            height: auto;
        }
    </style>
    <script src="jquery-2.1.1.min.js"></script>
    <script>
    $(function(){
        $(window).on("load",function(){
            imgLocation();
            var dataImg = {"data":[{"src":"img (1).jpg"},{"src":"img (2).jpg"},{"src":"img (3).jpg"},{"src":"img (4).jpg"},{"src":"img (5).jpg"},{"src":"img (6).jpg"},{"src":"img (7).jpg"}]};
            window.onscroll = function(){
                if(scrollside()){
                    $.each(dataImg.data,function(index,value){
                        var box = $("<div>").addClass("box").appendTo($("#container"));
                        var content = $("<div>").addClass("content").appendTo(box);
                        $("<img>").attr("src","images/01/"+$(value).attr("src")).appendTo(content);
                    });
                    imgLocation();
                }
            };
        });
    });


    function scrollside(){
        var box = $(".box");
        var lastboxHeight = box.last().get(0).offsetTop+Math.floor(box.last().height()/2);
        var documentHeight = $(document).width();
        var scrollHeight = $(window).scrollTop();
        return (lastboxHeight<scrollHeight+documentHeight)?true:false;
    }

    function imgLocation(){
        var box = $(".box");
        var boxWidth = box.eq(0).width();
        var num = Math.floor($(window).width()/boxWidth);
        var boxArr=[];
        box.each(function(index,value){
            var boxHeight = box.eq(index).height();
            if(index<num){
                boxArr[index]= boxHeight;
            }else{
                var minboxHeight = Math.min.apply(null,boxArr);
                var minboxIndex = $.inArray(minboxHeight,boxArr);
                $(value).css({
                    "position":"absolute",
                    "top":minboxHeight,
                    "left":box.eq(minboxIndex).position().left
                });
                boxArr[minboxIndex]+=box.eq(index).height();
            }
        });
    }
    </script>
</head>
<body>
    <div id="container">
        <div class="box">
            <div class="content">
                <img src="images/01/img (1).jpg">
            </div>
        </div>
        <div class="box">
            <div class="content">
                <img src="images/01/img (2).jpg">
            </div>
        </div>
        <div class="box">
            <div class="content">
                <img src="images/01/img (3).jpg">
            </div>
        </div>
        <div class="box">
            <div class="content">
                <img src="images/01/img (4).jpg">
            </div>
        </div>
        <div class="box">
            <div class="content">
                <img src="images/01/img (5).jpg">
            </div>
        </div>
        <div class="box">
            <div class="content">
                <img src="images/01/img (6).jpg">
            </div>
        </div>
        <div class="box">
            <div class="content">
                <img src="images/01/img (7).jpg">
            </div>
        </div>
        <div class="box">
            <div class="content">
                <img src="images/01/img (8).jpg">
            </div>
        </div>
        <div class="box">
            <div class="content">
                <img src="images/01/img (9).jpg">
            </div>
        </div>
        <div class="box">
            <div class="content">
                <img src="images/01/img (10).jpg">
            </div>
        </div>
        <div class="box">
            <div class="content">
                <img src="images/01/img (11).jpg">
            </div>
        </div>
        <div class="box">
            <div class="content">
                <img src="images/01/img (12).jpg">
            </div>
        </div>
        <div class="box">
            <div class="content">
                <img src="images/01/img (13).jpg">
            </div>
        </div>
        <div class="box">
            <div class="content">
                <img src="images/01/img (14).jpg">
            </div>
        </div>
        <div class="box">
            <div class="content">
                <img src="images/01/img (15).jpg">
            </div>
        </div>
        <div class="box">
            <div class="content">
                <img src="images/01/img (16).jpg">
            </div>
        </div>
        <div class="box">
            <div class="content">
                <img src="images/01/img (17).jpg">
            </div>
        </div>
        <div class="box">
            <div class="content">
                <img src="images/01/img (18).jpg">
            </div>
        </div>
        <div class="box">
            <div class="content">
                <img src="images/01/img (19).jpg">
            </div>
        </div>
        <div class="box">
            <div class="content">
                <img src="images/01/img (20).jpg">
            </div>
        </div>
    </div>
</body>
</html>

 

附:代码包下载链接

posted @ 2015-07-15 23:43  w3cape  阅读(394)  评论(0编辑  收藏  举报