jQuery插件masonry实现瀑布流布局

jQuery Masonry是一个jQuery动态网格布局的插件。每个元素都是漂浮在固定的网格布局上面，就像一枚图钉定在墙上一样。

淘建站为您提供更多_其它特效_瀑布流_延迟_懒加载，在此特别感谢您对我们的支持与厚爱！

HTML

首先载入jQuery库和Masonry插件。

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.masonry.min.js"></script>

然后我们放置多个图片，代码格式如下：

<div class="photo">
    <a href="#"><img src="images/01.jpg" alt="" /></a>
    <p><a href="#">做梦也旅行</a>：炸面卷肠粉.——肠粉白得晶莹剔透，上面撒上醉人的葱花，和传统的布拉肠不同，口感细滑而带有一点韧性。。。 </p>
</div>
<div class="photo">
    <a href="#"><img src="images/02.jpg" alt="" /></a>
    <p><a href="#">菓小菓</a>：随时都要卖，还要又又美味</p>
</div>
......

jQuery

$(function(){ 
  $('#container').masonry({ 
    itemSelector : '.photo', 
    columnWidth : 247 
  }); 
});

这就是传说中的瀑布流效果。若是配上懒加载效果那就更好啦，点击查看网页特效Lazyload图片懒加载。