jquery插件masonry实现的一个简单的瀑布流

我个人理解，瀑布流就是开始加载多少条，然后再通过scroll事件追加加载数据，我说的可能不好理解，具体结合代码应该能看懂，如果我理解的不好请多多包涵。

css代码：

<style type="text/css" > 
    .body{ background-color:#eee;}
    #main{ background-color:White; width:920px; margin:0 auto;}
    .item{width:225px; float:left; display:inline; margin-right:5px; margin-top:5px;}
    .item img{ border:0;}
</style> 

 

页面布局：

<div id="main"> 
    <div class="item"><a href="javascript:void(0)"><img src="img/1.jpg" alt="" /></a><p>sdfsdfsdfsdfs</p></div>
    
    <div class="item"><a href="javascript:void(0)"><img src="img/2.jpg" alt="" /></a><p>sdfsdfsdfsdfs</p></div>
    
    <div class="item"><a href="javascript:void(0)"><img src="img/3.jpg" alt="" /></a><p>sdfsdfsdfsdfs</p></div>
    
    <div class="item"><a href="javascript:void(0)"><img src="img/4.jpg" alt="" /></a><p>sdfsdfsdfsdfs</p></div>
    
    <div class="item"><a href="javascript:void(0)"><img src="img/5.jpg" alt="" /></a><p>sdfsdfsdfsdfs</p></div>
    
   <div class="item"><a href="javascript:void(0)"><img src="img/6.jpg" alt="" /></a><p>sdfsdfsdfsdfs</p></div>
    
    <div class="item"><a href="javascript:void(0)"><img src="img/7.jpg" alt="" /></a><p>sdfsdfsdfsdfs</p></div>
    
    <div class="item"><a href="javascript:void(0)"><img src="img/8.jpg" alt="" /></a><p>sdfsdfsdfsdfs</p></div>
    
    <div class="item"><a href="javascript:void(0)"><img src="img/9.jpg" alt="" /></a><p>sdfsdfsdfsdfs</p></div>
    
    <div class="item"><a href="javascript:void(0)"><img src="img/1.jpg" alt="" /></a><p>sdfsdfsdfsdfs</p></div>
    <div class="item"><a href="javascript:void(0)"><img src="img/2.jpg" alt="" /></a><p>sdfsdfsdfsdfs</p></div>
    <div class="item"><a href="javascript:void(0)"><img src="img/5.jpg" alt="" /></a><p>sdfsdfsdfsdfs</p></div>
</div>
<div id="load" style="display:none; color:Red; text-align:center;">正在加载...</div> 

js代码：首先要引用jquery.js和masonry.js两个js

<script type="text/javascript" language="javascript" charset="utf-8">
    $(document).ready(function(){ 
         $("#main").masonry(function(){
            itemSelector:'.item'
        });
        //滚动条事件
        $(window).bind('scroll',function(){
            if($(document).scrollTop()+$(window).height()>$(document).height()-20){
//                 alert("scrollTop:"+$(document).scrollTop()+" chuangHeight:"+$(window).height()+" he:"+($(document).scrollTop()+$(window).height())+" pageHeight:"+$(document).height());
                  $("#load").show();   //显示正在加载
                  setTimeout(function(){
                    for(var j=0;j<10;j++){  
                        var str=$('<div class="item"><a href="javascript:void(0)"><img src="img/10.jpg" alt=""/></a><p>横跨包斯蒂芬</p></div>'); 
                        //加载并重新布局
                        $("#main").append(str).masonry('appended',str,true);
                    }
                  },3000);  //每隔多少时间显示
            }
        });
    });
</script>