当前位置：首页 > 网页特效 > 其他

仿Pinterest超酷jQuery瀑布流动态网格布局插件

分类：其他日期：2024-05-14 点击(0) 评论(0)

简介

##### 使用方法
使用该瀑布流插件要引入wookmark.js文件，可以选择使用jQuery。demo中的容器样式都放置在main.css中，你也可以使用它。

```html
<link rel="stylesheet" href="css/main.css">
<script src="js/jquery.js"></script>
<script src="js/wookmark.js"></script> 
```               
#####  调用插件
不使用jQuery来调用插件：

```html
var wookmark = new Wookmark('#myElementContainer'[, options ]); 
```               
使用jQuery来调用插件：

```javascript
$('#myElementContainer').wookmark(options);  
```             
myElementContainer是包裹图片列表的容器。

##### 配置参数 
```javascript
{
  align: 'center',
  autoResize: false,
  comparator: null,
  container: $('body'),
  direction: undefined,
  ignoreInactiveItems: true,
  itemWidth: 0,
  fillEmptySpace: false,
  flexibleWidth: 0,
  offset: 2,
  onLayoutChanged: undefined,
  outerOffset: 0,
  possibleFilters: [],
  resizeDelay: 50,
  verticalOffset: undefined
}     
```           
- align：对齐方式是，可选值有："left", "right", "center"。
- autoResize：如果设置为true，会在浏览器尺寸改变时更新瀑布流布局。
- resizeDelay：默认值是50，单位毫秒。更新瀑布流布局的延迟时间。
- comparator：一个自定义的排序函数。
- container：使用该元素的宽度来计算瀑布流网格布局的列数。默认是window。例如：$('myContentGrid')，该容器的CSS属性必须有position: relative。
- direction：设置布局从顶部的左边还是右边开始。可选值：left或right。
- ignoreInactiveItems：如果设置为true，无效的项任然是可见的。用于淡入淡出过滤图片。
- itemWidth：第一个网格的默认宽度，可以是像素值，默认值200；或百分比值，默认值10%。
- fillEmptySpace：如果设置为true，会在每一列的底部使用空白的网格来填补，使每一列都底部对齐。占位元素都带有class wookmark-placeholder。
- flexibleWidth：基于浏览器的宽度来制作响应式的瀑布流网格布局，可选值true或false。
- offset：各个网格项的水平和垂直间距。默认值为2。
- onLayoutChanged：在网格布局发生改变时的回调函数。
- outerOffset：默认值为0。网格布局和父元素之间的距离。

web299.com

仿Pinterest超酷jQuery瀑布流动态网格布局插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果