rowGrid.js 基于 jQuery 轻量级图片流横排布局插件 - 文章教程

rowGrid.js 基于 jQuery 轻量级图片流横排布局插件

发布于 2020-05-05 字数 4029 浏览 1585 评论 0

rowGrid.js 一个小型的轻量级JavaScript插件,用于将图片整齐的排成一行,高度被设置成一致,而且是响应式的,可以无限滚动阅览。

rowGrid.js 基于 jQuery 轻量级图片流横排布局插件

网格类似于 Google Image Search、Flickr、Shutterstock 和 Google+ 图像上的网格。

特征

  • 响应性
  • 无限滚动
  • 支持所有现代浏览器和 IE >= 8

如果你不喜欢 jQuery 的版本,你可以在这里找到无依赖的插件:https://github.com/brunjo/rowGrid

安装

需要 jQuery 1.7 或更高版本。

<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.row-grid.min.js"></script>

另外,如果您不想自己托管 rowGrid.js,可以使用 cdnjs:https://cdnjs.com/libraries/rowgrid.js

您还可以使用 Bower 或 NPM 安装它:

  • Bower: bower install rowGrid.js.
  • NPM: npm install rowgrid.js.

使用方法

重要的是将宽度和高度声明为属性在IMG标记上,或者在开始 rowGrid.js 之前等待加载图像。

编辑 HTML 结构:

<div class="container">
  <div class="item">
    <img src="path/to/image" width="320" height="200" />
  </div>
  <div class="item">
    <img src="path/to/image" width="290" height="200" />
  </div>
  ...
</div>

设置一些参数,然后初始化:

var options = {minMargin: 10, maxMargin: 35, itemSelector: ".item"};
$(".container").rowGrid(options);

无限滚动

// append new items
$(".container").append("<div class='item'><img src='http://placehold.it/310x200' /></div>");
// 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: numbernull
  • 默认值: null

这是项目之间的最小水平边距。边距仅在项目之间,而不是在第一个/最后一个项目与容器之间。

maxMargin

  • Value: numbernull
  • 默认值: null

这是项目之间最大的水平距离。

resize

  • Value: boolean
  • 默认值: true

如果resize将调整大小事件的布局更新设置为真。这对于响应性的网站是有用的。

LastRowClass

  • Value: string
  • 默认值: last-row

最后一行中的第一个项得到这个类。

firstItemClass

  • Value: stringnull
  • 默认值: null

每行的第一项都得到这个类。

LastItemClass

  • Value: stringnull
  • 默认值: null

每行中的最后一个项都得到这个类。

相关链接

Github 地址:https://github.com/brunjo/rowGrid.js

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

佚名

文章 0 评论 0

文江

文章 0 评论 0

2012013325

文章 0 评论 0

女中豪杰

文章 2 评论 0