基于 Jquery Masonry + imagesLoaded 插件实现瀑布流布局

周末研究了一下 Jquery 的两个实现瀑布流的插件,一个是 WookMark 一个就是 Masonry。其中前者专门为了实现图片瀑布流功能,而后者则是为了实现 div 的瀑布流布局排列。

都试了一下之后,选择了 Masonry 插件,因为对 html 结构的要求更低,实现起来逻辑看着更清楚。其中
HTML 代码:

<div>
<div id="images">
<div><img src="//qdkfweb.cn/d/uploads/2013/06/085423k2b.jpg"><p>描述文字</p></div>
<div><img src="//qdkfweb.cn/d/uploads/2013/06/085434Ux1.jpg"><p>描述文字</p></div>
<div><img src="//qdkfweb.cn/d/uploads/2013/06/0854344IU.jpg"><p>描述文字</p></div>
<div><img src="//qdkfweb.cn/d/uploads/2013/06/085435b8u.jpg"><p>描述文字</p></div>
<div><img src="//qdkfweb.cn/d/uploads/2013/06/085435au0.jpg"><p>描述文字</p></div>
<div><img src="//qdkfweb.cn/d/uploads/2013/06/0854368VF.jpg"><p>描述文字</p></div>
<div><img src="//qdkfweb.cn/d/uploads/2013/06/085436aLd.jpg"><p>描述文字</p></div>
</div>
</div>

CSS 代码:

.items {
width: 195px;
margin: 0 8px 14px 0;
text-align:center;
padding: 10px;
float: left;  // 必须要有,使 div 先横向排列,然后 Masonry 插件才能生效
display: none; // 优化显示需求
border: 1px solid #DDD;
background: #EEE;
-moz-box-shadow:0 1px 3px rgba(0, 0, 0, .3);
-webkil-box-shadow:0 1px 3px rgba(0, 0, 0, .3);
box-shadow:0 1px 3px rgba(0, 0, 0, .3);
}
.items img {
width: 185px;
}

CSS 代码中,必须的就是对元素 float 的描述,其次 display 默认为不可见,为了能够在图片加载之后再显示出来,使得用户体验更好。同时使用了一些 css3 的属性,声明了每个“砖块”的阴影。

JS代码:

<script src="js/jquery.masonry.min.js"></script>
<script src="js/jquery.imagesloaded.min.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
var container = $('#images .items');
var masonryContainer = $('#images');
container.imagesLoaded(function(){
container.fadeIn();
masonryContainer.masonry({
itemSelector : '.items',
isAnimated: true,
});
});
}
);

JS 代码在页面加载完成后执行,同时,使用了 imagesloaded 插件,来在砖块元素图片加载完成后再调用 masonry 插件。调用 masonry 的元素应该是所有 items 最外层的元素,而同时判断了所有 items 元素图片加载成功之后才将元素显示出来。

Masonry 主页:http://masonry.desandro.com/
在线预览:http://yunland.sinaapp.com/mark

这个演示中用到了 imagesLoaded 插件实现了图片加载完成的回调,同时在 masonry 页面中无限滚动的 example 中还涉及到一个无限翻页的插件,这些小巧的 jquery 插件都为我们的前端页面工作提供了很便利的条件。在之后的工作中说不定就可以用到。


关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流