Masonryjs实现瀑布流

来源：互联网发布：tensorflow 关闭会话编辑：程序博客网时间：2024/05/29 03:06

一、引入Masonry
下载或从cdn引入
官网地址：http://masonry.desandro.com

二、编写html

<div id="container">    <div class="col-xs-12 col-sm-6 col-md-6 item">        <div class="thumbnail">            图文展示        </div>    </div>    <div class="col-xs-12 col-sm-6 col-md-6 item">        <div class="thumbnail">            图文展示        <div>    </div></div>

三、初始化

$('#container').masonry({    itemSelector: '.item',    isAnimated: true,        isFitWidth: true     // 自适应宽度  });

下面介绍下主要参数：

itemSelector     class选择器,默认'.item'，这个表示每个块的选择器 columnWidth     一列的宽度 isAnimated     使用jquery的布局变化,默认true animationOptions     animate属性渐变效果(Object { queue: false, duration: 500 }) gutterWidth     列的间隙 Integer isFitWidth     自适应浏览器宽度Boolean isResizableL     是否可调整大小 Boolean isRTL     使用从右到左的布局 Boolean

0 0