fly63前端网

www.fly63.com

首页文章资源工具教程 栏目
  • 关于我们
  • 网站投稿
  • 赞助一下
搜索

在线工具_工作生活好帮手

打造各种简单、易用、便捷的在线工具,网友无需注册和下载安装即可使用

点击查看

关闭

提交网站

Wookmark-jQuery
分享
复制链接
新浪微博
QQ 好友

扫一扫分享

GitHub:https://github.com/germanysbestkeptsecret/Wookmark-jQuery
网站描述:用于布局元素的动态网格的jQuery瀑布流插件

瀑布流布局非常适合大量图片的展示,一改过去裁剪图片尺寸统一的排版,每张图片都能完全展示,并错落有致,让人眼前一亮。

jquery插件用于布局元素的动态网格,也就是大家常看到的瀑布流。  项目中的 img 元素的 width 和 height 属性需要写,否则定位会不准确。


载入 JavaScript 文件

<script src="jquery.js"></script>
<script src="jquery.wookmark.js"></script>

css 样式

/*
 * 父容器需要设置相对定位
 * 项目需要设置隐藏
 */
#list{position:relative;}
#list li{display:none;}

dom 结构

<!--
本例中,$("#list") 就是父容器,内部的 li 就是要进行瀑布流布局的项目。当然也可以使用 div 或其他标签的来写。
项目中的 img 元素的 width 和 height 属性需要写,否则定位会不准确。
-->
<ul id="list">
  <li><img src="pic_1.jpg" width="200" height="283"><p>text</p></li>
  <li><img src="pic_2.jpg" width="200" height="300"><p>text</p></li>
  ...
  <li><img src="pic_n.jpg" width="200" height="252"><p>text</p></li>
</ul>

调用 Wookmark

$('#list li').wookmark();

// 自定义参数调用
$('#list li').wookmark({
  container: $('#list'),
  offset: 10,
  itemWidth: 200
});

手动触发布局事件

// 根据需要,可以进行手动触发重新布局
$('#list').trigger('refreshWookmark');

参数说明

名称默认值说明
container$('body')父容器。自定义时需要给父容器设置 CSS 属性 "position: relative"。
align'center'对齐方向,可设置为:"left", "right", "center"。
directionundefined排序方向。可设置为:"left"(从左至右), "right"(从右至左)

若不设置,则判断 align 为 "right" 时,direction 为 "right",否则默认为 "left"。

autoResizefalse是否在浏览器窗口大小变化时进行重新布局。
resizeDelay50检测自动重新布局的间隔时间 (ms)。
itemWidth0列表项目的宽度 (px 或 %)。
flexibleWidth0列表项目自适应的最大宽度。该项设置时,itemWidth 的值作为列表项目的最小宽度。
offset2列表项目的间距 (px),横向纵向相同。
verticalOffsetundefined列表项目纵向的间距 (px),与 offset 配合即可分别设置横向与纵向的间距。
outerOffset0外部间距,与父容器顶部的间距。
ignoreInactiveItemstrue是否隐藏被过滤的项目。
fillEmptySpacefalse是否填充底部占位符。占位符的 class 为 "wookmark-placeholder"。
comparatornull自定义排序方法。
possibleFilters[]
onLayoutChangedundefined布局变化时触发的函数。

链接: https://fly63.com/nav/1683

more>>
相关栏目
jQuery之家
致力于搜集和整理各种jQuery插件,jQuery特效...
官网
fullPage.js
jQuery全屏滚动插件
官网GitHub
Waterfall.js
瀑布流无限加载插件
官网GitHub
Raty
一个非常棒的jQuery 评分插件
官网GitHub
Bootstrap-waterfall
一款基于Bootstrap仿Pinterest网站的网格瀑布流插件
官网GitHub
Jcrop
一个功能强大的 jQuery 图像裁剪插件
官网GitHub
jcarousel
jQuery轮播图插件
官网GitHub
Parallax.js
一款jQuery滚动视觉差插件
官网GitHub
vegas
一个jQuery / Zepto幻灯片插件
官网GitHub
paroller.js
一款轻量级的页面滚动视觉差特效jquery插件
官网GitHub
lazyload.js
jquery图片懒加载插件
官网GitHub
alertify.js
jQuery酷炫的各种消息提示插件
官网GitHub
pickadate.js
一个轻量级的 jQuery 日期选择插件
官网GitHub
chosen.js
基于jquery的下拉选择框美化插件
官网GitHub
threesixty.js
360度产品图片预览jQuery插件
官网GitHub
textillate.js
实现动感的 CSS3 文本动画的简单插件
官网GitHub

手机预览