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/