jQuery插件masonry实现瀑布流布局

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

分类：其它特效 > 瀑布流难易：初级

查看演示下载资源下载积分： 26 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

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 
  }); 
});

这就是传说中的<a href='http://www.sucaihuo.com/jquery/demo/47/' target='_blank'>瀑布流效果</a>。若是配上懒加载效果那就更好啦，点击查看<strong>网页特效</strong><a href='http://www.sucaihuo.com/js/46.html'' target='_blank'>Lazyload图片懒加载</a>。