jQuery Masonry 好用的瀑布流插件

jQuery Masonry 好用的瀑布流插件
插件描述:基于jquery.masonry实现的瀑布流

使用方法

载入JavaScript和CSS文件:

<script type="text/javascript" src="js/jquery-1.12.4.min.js" ></script>//可选
<script type="text/javascript" src="dist/masonry.pkgd.min.js"></script>
<script type="text/javascript" src="dist/imagesloaded.pkgd.min.js"></script>//可选, 图片未设置大小时使用

CSS样式:

.grid{margin-top:50px;}
.grid-item,.grid-sizer{width:200px;}
.grid-item img{display:block;max-width:100%;padding:3px;border:1px solid #ddd;}
.grid-item p{margin-top:5px;line-height:20px;font-size:12px;text-align:center;}

DOM结构:

<div class="grid container">
    <div class="grid-sizer"></div>
    <div class="grid-item">
        <a href="javascript:void(0)"><img src="images/img_1.jpg" /><p>图片1</p></a>
    </div>
    <div class="grid-item">
        <a href="javascript:void(0)"><img src="images/img_2.jpg" /><p>图片2</p></a>
    </div>
    <div class="grid-item">
        <a href="javascript:void(0)"><img src="images/img_3.jpg" /><p>图片3</p></a>
    </div>
</div>

JavaScript调用方式:

//图片大小已定时的调用方法
$('.grid').masonry({
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer'
})

//jQuery调用方法, 必须驾照jQuery文件
var $grid = $('.grid').masonry({
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer'
});
$grid.imagesLoaded().progress( function() {
  $grid.masonry('layout');
});

//js条用方法, 不需要加载jQuery文件
var grid = document.querySelector('.grid');
var msnry = new Masonry( grid, {
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer'
});
imagesLoaded( grid ).on( 'progress', function() {
  msnry.layout();
});

参数说明

名称 类型 默认值 说明
itemSelector
string '.item'
class选择器
columnWidth
string
一列的宽度
percentPosition
boolean false
false使用'px'单位定位,true使用'%'定位
fitWidth
boolean false
根据父容器的大小设置容器的宽度以自适应列数
originLeft
boolean true
控制布局的水平流程,true从左侧开始,false从右侧开始
originTop
boolean true
控制布局的垂直流程,true从顶部开始,false从底部开始
containerStyle
string {position:'relative'}
应用到外部容器的css样式
transitionDuration
string '0.4s'
调整大小和位置时的每一个项目的过渡时间
stagger
integer 30
调整大小和位置时项目与项目间隔的时间
resize
boolean true
当窗口大小改变时,调整大小和位置
initLayout
boolean true
启用初始化布局
stamp
string ''
指定被固定元素