• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

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

JAVA web前端中文站 2年前 (2017-06-23) 1246次浏览 已收录 0个评论

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

更多精彩内容请看 web 前端中文站
http://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 还有很多方法和参数,大家可以参考官方文档。

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


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:使用瀑布流插件 Masonry 进行瀑布流布局
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址