jq瀑布流

作者: LorenaLu | 来源:发表于2017-09-05 06:07 被阅读0次

瀑布流
jq瀑布流
JQ实现瀑布流
JQ 方式瀑布流
前端一些工具
瀑布流布局_木桶布局
瀑布流的三种实现
瀑布流布局的学习
iOS瀑布流
「实战」蘑菇街 PC 端首页，瀑布流布局的实现原理与细节技巧

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                list-style: none;
            }
            #container{
                margin: 20px auto;
                width: 1100px;
            }
            #container ul{
                float: left;
                width: 250px;
                margin: 0 5px;
            }
            #container ul>li{
                width: 250px;
                margin-bottom: 10px;
            }
            #container ul:after{
                height: 0;
                content: '';
                display: block;
                clear: both;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <ul></ul>
            <ul></ul>
            <ul></ul>
            <ul></ul>
        </div>
    </body>
    <script src="jquery-2.2.3.js" type="text/javascript" charset="utf-8"></script>
    <script src="jquery.tools.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        var picWidth = 250;
        $(function () {
            
            //页面一加载，先创建20个图片
            createNimg(20);
            
        })
        //当页面滚动时，动态加载图片
        window.onscroll = function () {
            var uls = $('ul');
            
            var minHeight = uls[getMinIndex(uls)].offsetHeight;
            //如果 卷起的高度+窗口高度>最小高度ul的高度，则继续加载20张图片
            if($.clientH() + $.scrollTop() > minHeight){
                createNimg(20);
            }
            console.log(minHeight);
            console.log($.clientH());
            console.log($.scrollTop());
        };
        //创建一张图片
        function createImg () {
            var picHeight = $.random(400,800);
            var $img = $('<img src = "https://unsplash.it/'+picWidth+'/'+picHeight+'/?random"></img>');
            return $img.css({
                width : picWidth,
                height : picHeight
            });
        }
        
//      console.log(createImg());

        //将图片拼接进高度最小的ul里
        function appendImg () {
            var uls = $('ul');
            var minIndex = getMinIndex(uls);
            $('<li></li>').append(createImg()).appendTo('ul:eq('+minIndex+')');
        }
        //获取最小高度ul的下标
        function getMinIndex (uls) {
            var minIndex = 0;
            for (var i = 1; i<uls.length; i++) {
                if(uls[i].offsetHeight < uls[minIndex].offsetHeight){
                    minIndex = i;
                } 
            }
            return minIndex;
        }
        
        //创建n张图片
        function createNimg (n) {
            for (var i = 0; i < n ; i++) {
                appendImg();
            }
        }
        
    </script>
</html>