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

jQuery

April 1, 2018

TAGS:
jQuery
Responsive

Mason.jsは、グリッドを作成できるようにするjQueryプラグインです。

USE

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]
	]
});

OPTIONS

$("#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

Demo/Download