瀑布流布局在很多网站都有应用,也是从国外流行起来的一种不规则布局,想要在网页端实现瀑布流效果可以借用Masonry插件。
一、引入Masonry文件
可以去官网下载到本地,也可以直接引入CDN,还可以用npm等包管理工具直接下载。此处用CDN引入。
官网地址:http://masonry.desandro.com
<script src="https://npmcdn.com/masonry-layout@4.0/dist/masonry.pkgd.js"></script>
<!-- or -->
<script src="https://npmcdn.com/masonry-layout@4.0/dist/masonry.pkgd.min.js"></script>
二、编写html结构和样式
<div id="container">
<div class="item">
<img src="touxiang-@3x.png">
</div>
<div class="item">
<img src="test.png">
</div>
<div class="item">
<img src="touxiang-@3x.png">
</div>
<div class="item">
<img src="test.png">
</div>
<div class="item">
<img src="touxiang-@3x.png">
</div>
<div class="item">
<img src="test.png">
</div>
</div>
<style>
#container{
margin: 0 auto;
background: red;
}
.item{
/*width: 100px;*/ /* 控制每个图片宽度 */
margin: 2px;
}
</style>
三、初始化插件
$('#container').masonry({
itemSelector: '.item',
isAnimated: true,
// columnWidth: 450,
isFitWidth: true // 自适应宽度
});
下面介绍下主要参数:
itemSelector class选择器,默认'.item',这个表示每个块的选择器
columnWidth 一列的宽度
isAnimated 使用jquery的布局变化,默认true
animationOptions animate属性渐变效果(Object { queue: false, duration: 500 })
gutterWidth 列的间隙 Integer
isFitWidth 自适应浏览器宽度Boolean
isResizableL 是否可调整大小 Boolean
isRTL 使用从右到左的布局 Boolean
一般只需要用到:itemSelector、isFitWidth即可。先将每个需要自适应的元素放入div,并给定样式,此处是item。通过css可以控制每个item的宽度。
isFitWidth默认为false,开启后容器container将使用自适应宽度。然后用css控制居中margin:0 auto;即可。