masonry 瀑布流布局外掛程式使用說明

2021-06-07 05:31:42 字數 1337 閱讀 3602

引數名

引數說明

itemselector

class選擇器,預設'.item'

columnwidth

一列的寬度

isanimated

使用jquery的布局變化,預設true

animationoptions

animate屬性漸變效果(object )

gutterwidth

列的間隙 integer

isfitwidth

適應寬度boolean

isresizablel

是否可調整大小 boolean

isrtl

使用從右到左的布局 boolean

當需要排列div時

需要呼叫

var $container = $('#container');

$container.imagesloaded(function());

});呼叫masonry外掛程式的方法格式是:$('#container').masonry( 'methodname', [optionalparameters] )

例如:.masonry( 'destroy' )// 完全移除masonry的功能 返回到元素預初始化狀態

.masonry( 'layout', $items, callback )// 指定專案的布局

.masonry( 'option', options ) //設定option

.masonry( 'reloaditems' ) //重新聚合所有專案以當前的順序

.masonry( 'reload' ) //用於預先考慮或者插入專案 .masonry( 'reloaditems' )的簡化版

.masonry( 'remove', $items ) //從masonry例項或dom中移除專案

演示

$(function());

});$(window).scroll(function scrollhandler()

var c=document.documentelement.clientheight || document.body.clientheight, t=$(document).scrolltop();

if(t+c >= $container.offset().top+$container.height())

}, 100);

});var jloading = $('#loading');

function loadmore()

});

來自:

瀑布流布局與自定義瀑布流布局外掛程式

瀑布流布局是網頁中經常採用的一種布局方式,其布局有如下特點 瀑布流布局特點 1 元素按列排放 2 列寬一致,但高度不等 3 布局過程中將優先向高度最小的列補充資料 以下是自定義的乙個jquery瀑布流外掛程式 jquery.mywaterfull.js function arrheight.push...

瀑布流布局

最近在看瀑布流布局,覺得很神奇,每個模組都可以找到自己應該在的地方,各列齊頭並進,給人一種很high的感覺。一開始自己也想了思路 模組1,模組2,裡面模組float left。結果試了一下,悲劇啊,不同高度的直接就掛了,布局亂了。等高的還可以。然後我又想分類,就是規定幾列,分別把模組順序載入在各個c...

瀑布流布局

很早以前我就想自己學寫一下瀑布流布局,可是由於懶神來找我聊天咯,所以推遲咯很久直到今天我才來寫瀑布流布局。由於鄙人的js還有很大的提公升空間,所以我是先看咯一下那些大神的具體講解和分析,然後才開始著手寫的,收穫那是槓槓的。1 大家都知道要想實現瀑布流,就必須規定每乙個區塊的寬度要一致 2 確定每一排...