jQuery Wookmark(强力推荐!)

 查看演示  website  立即下载

这是一个jQuery插件用于布局元素的动态网格,也就是大家常看到的瀑布流。

示例请参见文档页面。

该信息库还包含了许多功能的例子。在这个例子中使用的所有图像均为其各自所有者的版权，仅包括展示插件功能。

使用步骤

jQuery - 1.4.3或更高

所需文件

复制jquery.wookmark.js到您的JavaScript文件夹。

用法

该插件可以以不同的方式被jQuery调用。

使用默认设置标准的调用方法：

$('.myElements').wookmark();

在那里停放MyElement类的是你要布置在网格中的项目。

选项

$('.myElements').wookmark({
  align: 'center',
  autoResize: false,
  comparator: null,
  container: $('body'),
  direction: undefined,
  ignoreInactiveItems: true,
  itemWidth: 0,
  fillEmptySpace: false,
  flexibleWidth: 0,
  offset: 2,
  onLayoutChanged: undefined,
  outerOffset: 0,
  resizeDelay: 50,
  possibleFilters: []
});

请参阅文档页面上的可用选项的详细信息。

itemWidth和flexibleWidth

这些值可以被指定为其中的数字将被解释为像素也可以使用百分比字符串像'20 ％' 。当flexibleWidth设置一个itemWidth ！ = 0作为最小项的宽度。作为例子使用了40％ flexibleWidth将导致两列，用10％的空间在容器的侧面。

触发刷新

这是隐藏的元素都不能进行布局，直到它们是可见的。如果您使用wookmark在一个隐藏的选项卡的布局不会被立即执行。当标签是可见您可以手动刷新wookmark使用触发器在你的容器。

$('#myContent').trigger('refreshWookmark');

fillEmptySpace

在每一列的底部创建的占位符以创建偶布局。请参阅如何使用它的例子占位符。这些占位符使用的CSS类wookmark占位符。你可以将其覆盖在自己的css来满足您的需求。

ignoreInactiveItems

当设置为false不活动的项目筛选时，仍会显示。这可以用来淡出过滤项。见example-filter/fade.html例子。

比较

您可以使用此选项来提供一个自定义的比较函数，该插件将使用的瓷砖排序。参见例如排序或例如戳记如何使用它

PREVIOUS:
NEXT:
颜色选择器jQuery MiniColors
jQuery ReSmenu 菜单