masonry 随笔

$.masonry( 'layoutItems', items, isStill ){
// 容器调用masonry(子元素类标签,每个子元素,是否。。)
 msnry.layoutItems( items, isStill )
 }

 

https://yunpan.cn/cM6DMxSvt7YSN  访问密码 6278   

 

https://github.com/TianYouH/masonry   模版

 

var mason = $('.grid').masonry({
// 设置itemSelector。指定子元素将被用作项目元素的布局
itemSelector: '.grid-item',

// 追加参与布局子元素
// stamp："追加布局元素类";

// 列宽
columnWidth: 300,
// 元素的大小布局与响应百分比宽度。columnWidth这是列宽。不设置默认为第一个元素宽

//这个是列与列间距宽度 
gutter: 50,

// 允许父容器居中显示。需为父容器添加margin: 0 auto;样式设置
// isFitWidth:true,

// true从左向右 false从右向左 水平方向，默认true
originLeft: false,

// true自上而下 false自下而上 垂直方向，默认true
originTop: false,

// 响应式布局使用
// 使用元素获取百分比设置
// columnWidth: '.grid-sizer',
// 按百分比设置位置
// percentPosition: true

// 禁止任何样式
// containerStyle: null,

// 窗口大小发生改变样式布局过渡时间。默认0.2
// transitionDuration: '0.2s',
// transitionDuration: 0,

// 子元素改变,所有子元素逐步过渡。设置为一个CSS时间格式, '0.03s',或者在毫秒数, 30.
// 默认值很快。 当发生事件回调该函数，即可重新排列
// stagger: "0.03s"

// 窗口大小改变是否重新排列。默认true
// resize: false

// 禁止布局初始化 默认true。false页面首次打开不布局，可通过事件执行布局
// initLayout: false

})

 

 

// 含有图片时，等图片加载结束在执行
 var $grid = $('.grid').masonry({
 itemSelector: '.grid-item',
 });
 $grid.imagesLoaded().progress( function() {
 $grid.masonry();
 });

 

 

mason.on( 'click', '.grid-item', function( event ) {
// 删除子元素事件
mason.masonry( 'remove', event.currentTarget ).masonry();
});



// 改变元素大小
// mason.on( 'click', '.grid-item', function() {
// $( this ).width(400);
// mason.masonry();
// });

 http://masonry.desandro.com/