基于 Jquery Masonry + imagesLoaded 插件实现瀑布流布局
周末研究了一下 jquery 的两个实现的插件,一个是 WookMark 一个就是 Masonry。其中前者专门为了实现图片功能,而后者则是为了实现 div 的瀑布流布局排列。
都试了一下之后,选择了 Masonry 插件,因为对 结构的要求更低,实现起来逻辑看着更清楚。其中
HTML :
<div> <div id="images"> <div><img src="http://img.caibaojian.com/uploads/2013/06/085423k2b.jpg" alt="基于 Jquery Masonry + imagesLoaded 插件实现瀑布流布局"><p>描述文字</p></div> <div><img src="http://img.caibaojian.com/uploads/2013/06/085434Ux1.jpg" alt="基于 Jquery Masonry + imagesLoaded 插件实现瀑布流布局"><p>描述文字</p></div> <div><img src="http://img.caibaojian.com/uploads/2013/06/0854344IU.jpg" alt="基于 Jquery Masonry + imagesLoaded 插件实现瀑布流布局"><p>描述文字</p></div> <div><img src="http://img.caibaojian.com/uploads/2013/06/085435b8u.jpg" alt="基于 Jquery Masonry + imagesLoaded 插件实现瀑布流布局"><p>描述文字</p></div> <div><img src="http://img.caibaojian.com/uploads/2013/06/085435au0.jpg" alt="基于 Jquery Masonry + imagesLoaded 插件实现瀑布流布局"><p>描述文字</p></div> <div><img src="http://img.caibaojian.com/uploads/2013/06/0854368VF.jpg" alt="基于 Jquery Masonry + imagesLoaded 插件实现瀑布流布局"><p>描述文字</p></div> <div><img src="http://img.caibaojian.com/uploads/2013/06/085436aLd.jpg" alt="基于 Jquery Masonry + imagesLoaded 插件实现瀑布流布局"><p>描述文字</p></div> </div> </div>
代码:
.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 默认为不可见,为了能够在图片加载之后再显示出来,使得用户体验更好。同时使用了一些 的属性,声明了每个“砖块”的阴影。
代码:
<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, }); }); } );
代码在页面加载完成后执行,同时,使用了 imagesloaded 插件,来在砖块元素图片加载完成后再调用 masonry 插件。调用 masonry 的元素应该是所有 items 最外层的元素,而同时判断了所有 items 元素图片加载成功之后才将元素显示出来。
Masonry 主页:
在线预览:
这个演示中用到了 imagesLoaded 插件实现了图片加载完成的回调,同时在 masonry 页面中无限滚动的 example 中还涉及到一个无限翻页的插件,这些小巧的 jquery 插件都为我们的前端页面工作提供了很便利的条件。在之后的工作中说不定就可以用到。
您可能感兴趣的文章:
基于 Jquery Masonry + imagesLoaded 插件实现瀑布流布局
一个简单的瀑布流效果(主体形式自写)
2013年优秀jQuery插件整理小结
JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记4
jquery实现瀑布流效果分享
CSS3中Column实现多栏布局示例
html5如何插入可自动播放的音频(图文)
jquery mobile使用和感受
Java布局管理器深入讨论
jQuery EasyUI 教程