使用瀑布流插件 Masonry 进行瀑布流布局

瀑布流布局我在很久以前都想实现它,可惜由于时间关系最终不了了之。我在 Book阅读 中就想加入瀑布流效果,但是实现起来太麻烦,还要考虑到兼容性。但是今天我遇到了一款基于 jQuery 的瀑布流插件Masonry,它给我带来了很多惊喜,今天我们一起来学习学习它。

更多精彩内容请看 web前端中文站
www.lisa33xiaoq.net 可按Ctrl + D 进行收藏

使用jQuery Masonry 插件创建瀑布流式的页面非常的方便和简单。下面我们先来看一看它的运行效果。

使用瀑布流插件 Masonry 进行瀑布流布局

看到这样的效果你是不是心动了。下面我开始介绍它的使用。

Masonry 是基于jQuery的,因此我们使用它之前必须要引入jquery作为支持。分别下载 jQuery 与 Masonry ,然后把他们都加载到页面中使用。

 <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script> <script src="masonry-docs.min.js"></script>

接下来就是具体的页面代码。把相关的内容都包含在id为masonry的div即可。

 <div id="masonry" class="container-fluid">   <div class="box"><img src="http://jq22.com/images/1.jpg"></div>   <div class="box"><img src="http://jq22.com/images/2.jpg"></div>   <div class="box"><img src="http://jq22.com/images/3.jpg"></div>   <div class="box"><img src="http://jq22.com/images/4.jpg"></div>   <div class="box"><img src="http://jq22.com/images/5.jpg"></div>   ... </div>

图片外面可以包裹一层a标签,这样方便跳转。

下面我们需要添加一点样式,.box 类我们添加了浮动属性,还设置了他的宽度。

 .container-fluid {   padding: 20px;   } .box {   margin-bottom: 20px;   float: left;   width: 220px;   }   .box img {   max-width: 100% }

再配合一点js代码开启瀑布流滚动效果。

 $(function() {     var $container = $('#masonry');     $container.imagesLoaded(function() {         $container.masonry({                 itemSelector: '.box',                 gutter: 20,                 isAnimated: true,             });      }); });

另外关于居中方面,可以用一下代码替换。

 $(function() {     var $objbox = $("#masonry");     var gutter = 25;     var centerFunc, $top0;     $objbox.imagesLoaded(function() {         $objbox.masonry({             itemSelector: "#masonry > .box",             gutter: gutter,             isAnimated: true         });         centerFunc = function() {             $top0 = $objbox.children("[style*='top: 0']");             $objbox.css("left", ($objbox.width() - ($top0.width() * $top0.length + gutter * ($top0.length - 1))) / 2).parent().css("overflow", "hidden");         };         centerFunc();     });     var tur = true;     $(window).resize(function() {         if (tur) {             setTimeout(function() {                 tur = true;                 centerFunc();             },             1000);             tur = false;         }     }); });

另外 masonry 还有很多方法和参数,大家可以参考官方文档。

【注:本文源自网络文章资源,由站长整理发布】

0
如无特殊说明,文章均为原作者原创,转载请注明出处

该文章由 发布

这货来去如风,什么鬼都没留下!!!
发表我的评论

Hi,请填写昵称和邮箱!

取消评论
代码 贴图 加粗 链接 删除线 签到