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

var mason = $(‘.grid‘).masonry({// 设置itemSelector。指定子元素将被用作项目元素的布局itemSelector: ‘.grid-item‘,// 追加参与布局子元素// stamp："追加布局元素类";// 列宽columnWidth: 300,// 元素的大小布局与响应百分比宽度。columnWidth这是列宽。不设置默认为第一个元素宽//这个是列与列间距宽度 gutter: 50,// 允许父容器居中显示。需为父容器添加margin: 0 auto;样式设置// isFitWidth:true,// true从左向右 false从右向左 水平方向，默认trueoriginLeft: false,// true自上而下 false自下而上 垂直方向，默认trueoriginTop: 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();// });