jQuery插件masonry实现瀑布流布局

收藏

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

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

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图片懒加载。