rowGrid.js 一个小型的轻量级JavaScript插件,用于将图片整齐的排成一行,高度被设置成一致,而且是响应式的,可以无限滚动阅览。
网格类似于 Google Image Search、Flickr、Shutterstock 和 Google+ 图像上的网格。
特征
响应性
无限滚动
支持所有现代浏览器和 IE >= 8
如果你不喜欢 jQuery 的版本,你可以在这里找到无依赖的插件:https://github.com/brunjo/rowGrid
安装
需要 jQuery 1.7 或更高版本。
您还可以使用 Bower 或 NPM 安装它:
用 Bower: bower install rowGrid.js.
用 NPM: npm install rowgrid.js.
使用方法
重要的是将宽度和高度声明为属性在IMG标记上,或者在开始 rowGrid.js 之前等待加载图像。
编辑 HTML 结构:
...
设置一些参数,然后初始化:
var options = {minMargin: 10, maxMargin: 35, itemSelector: ".item"};
$(".container").rowGrid(options);
无限滚动
// append new items
$(".container").append("
");// arrange appended items
$(".container").rowGrid("appended");
可选参数
$(".container").rowGrid({
itemSelector: ".item"
minMargin: 10,
maxMargin: 35,
resize: true,
lastRowClass: "last-row",
firstItemClass: "first-item"
});
itemSelector (required)
Value: string CSS选择器
你必须设置这个选项。选择器必须引用所有网格项。
minMargin
Value: number 或 null
默认值: null
这是项目之间的最小水平边距。边距仅在项目之间,而不是在第一个/最后一个项目与容器之间。
maxMargin
Value: number 或 null
默认值: null
这是项目之间最大的水平距离。
resize
Value: boolean
默认值: true
如果resize将调整大小事件的布局更新设置为真。这对于响应性的网站是有用的。
LastRowClass
Value: string
默认值: last-row
最后一行中的第一个项得到这个类。
firstItemClass
Value: string 或 null
默认值: null
每行的第一项都得到这个类。
LastItemClass
Value: string 或 null
默认值: null
每行中的最后一个项都得到这个类。
相关链接