jQuery模拟瀑布流布局

浏览数：22 / 时间：2015年06月09日

<!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+‘" >‘+
                        ‘<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>