jQuery
【jQuery】jQueryで完璧なグリッドを作成するMasonJS
April 1, 2018

Mason.jsは、グリッドを作成できるようにするjQueryプラグインです。
Basic CSS
#container { width: 100%; position: relative; } .box { float: left; background-color: #00ffff; position: relative; }
Call Mason.js (BASIC)
$("#container").mason({ itemSelector: ".box", ratio: 1.5, sizes: [ [1,1], [1,2], [2,2] ] });
$("#container").mason({ itemSelector: ".box", ratio: 1.5, sizes: [ [1,1], [1,2], [2,2] ], columns: [ [0,480,1], [480,780,2], [780,1080,3], [1080,1320,4], [1320,1680,5] ], promoted: [ ['class_name', 2, 1], ['class_name', 2, 3], ['class_name', 3, 3], ], filler: { itemSelector: '.fillerBox', filler_class: 'custom_filler', keepDataAndEvents: false }, layout: 'fluid', gutter: 10 },function(){ console.log("COMPLETE!") });
MIT