jQuery模拟瀑布流布局-前端开发博客

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>瀑布流</title>
    <style type="text/css">
        *{margin: 0; padding: 0; }
        body{text-align: center;}
        .content{margin: 0 auto ; text-align: center; width: 960px; overflow: hidden; }
        .content ul{float: left; width: 220px; margin: 5px; padding: 5px;}
        .content ul li{ border: 1px solid #8b4513; list-style: none; overflow: hidden; margin-top: 5px;}
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
        var _load = 0;
        function getMmsPicList(){
            _load =1 ;
            var list = {"list":[
                {"pic":"http://www.cssha.com/wp-content/uploads/2012/05/1.jpg","txt":"瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达"},
                {"pic":"http://www.cssha.com/wp-content/uploads/2012/05/2.jpg","txt":"瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达"},
                {"pic":"http://www.cssha.com/wp-content/uploads/2012/05/3.jpg","txt":"瀑布流思密达瀑布流思密达"},
                {"pic":"http://www.cssha.com/wp-content/uploads/2012/05/4.jpg","txt":"瀑布流思密达瀑布流思密达瀑布流思密达"},
                {"pic":"http://www.cssha.com/wp-content/uploads/2012/05/5.jpg","txt":"瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达"},
                {"pic":"http://www.cssha.com/wp-content/uploads/2012/05/6.jpg","txt":"瀑布流思密达"},
                {"pic":"http://www.cssha.com/wp-content/uploads/2012/05/7.jpg","txt":"瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达"},
                {"pic":"http://www.cssha.com/wp-content/uploads/2012/05/8.jpg","txt":"8等哈克h发发s客户方卡斯"},
                {"pic":"http://www.cssha.com/wp-content/uploads/2012/05/9.jpg","txt":"瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达"}
            ]};
            for(i in list.list){
                var pic = list.list[i].pic ;
                var txt = list.list[i].txt ;
                var oUl = $('.content ul') ;
                oUl.sort(function(a,b){
                    return $(a).height()-$(b).height();
                })
                var HTMLstr2 =  '<li>'+
                        '<img src="'+pic+'" alt="">'+
                        '<p>'+txt+'</p>'+
                        '</li>' ;
                $(oUl[0]).append(HTMLstr2);
            }
            _load = 0;
        }
        $(document).ready(function(){
            $(window).scroll(function(){
                var top = $(window).scrollTop() ;
                var winH = $(window).height() ;
                var docH = $(document).height();
                if(docH==(top+winH)){
                    if(_load==0){
                        getMmsPicList();
                    }
                }
            });
        });
    </script>
</head>
<body>
<div class="content">
    <ul class="list1">
        <li><img src="http://www.cssha.com/wp-content/uploads/2012/05/1.jpg" alt=""><p>瀑布流思密达</p></li>
        <li><img src="http://www.cssha.com/wp-content/uploads/2012/05/2.jpg" alt=""><p>瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达</p></li>
        <li><img src="http://www.cssha.com/wp-content/uploads/2012/05/3.jpg" alt=""><p>瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达</p></li>
    </ul>
    <ul class="list2">
        <li><img src="http://www.cssha.com/wp-content/uploads/2012/05/4.jpg" alt=""><p>瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达</p></li>
        <li><img src="http://www.cssha.com/wp-content/uploads/2012/05/5.jpg" alt=""><p>瀑布流思密达</p></li>
        <li><img src="http://www.cssha.com/wp-content/uploads/2012/05/6.jpg" alt=""><p>瀑布流思密达瀑布流思密达</p></li>
    </ul>
    <ul class="list3">
        <li><img src="http://www.cssha.com/wp-content/uploads/2012/05/7.jpg" alt=""><p>瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达</p></li>
        <li><img src="http://www.cssha.com/wp-content/uploads/2012/05/8.jpg" alt=""><p>瀑布流思密达瀑布流思密达</p></li>
        <li><img src="http://www.cssha.com/wp-content/uploads/2012/05/9.jpg" alt=""><p>瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达</p></li>
    </ul>
    <ul class="list4">
        <li><img src="http://www.cssha.com/wp-content/uploads/2012/05/1.jpg" alt=""><p>瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达</p></li>
        <li><img src="http://www.cssha.com/wp-content/uploads/2012/05/5.jpg" alt=""><p>瀑布流思密达</p></li>
        <li><img src="http://www.cssha.com/wp-content/uploads/2012/05/7.jpg" alt=""><p>瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达</p></li>
    </ul>
</div>
</body>
</html>

关注我

我的微信公众号：前端开发博客，在后台回复以下关键字可以获取资源。

回复「小抄」，领取Vue、JavaScript 和 WebComponent 小抄 PDF
回复「Vue脑图」获取 Vue 相关脑图
回复「思维图」获取 JavaScript 相关思维图
回复「简历」获取简历制作建议
回复「简历模板」获取精选的简历模板
回复「加群」进入500人前端精英群
回复「电子书」下载我整理的大量前端资源，含面试、Vue实战项目、CSS和JavaScript电子书等。
回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识，加我微信:caibaojian89 交流