瀑布流布局非常适合大量图片的展示,一改过去裁剪图片尺寸统一的排版,每张图片都能完全展示,并错落有致,让人眼前一亮。
- 版本:
- jQuery v1.4.3+
- jQuery Wookmark Load v1.4.8
- 注意事项:
-
项目中的 img 元素的 width 和 height 属性需要写,否则定位会不准确。(可以用 JavaScript 实时获取图片的宽高,但图片数量过多时,这将是一件不靠谱的事情。)
在线实例
实例预览 Example 基本示例
实例预览 AMD 加载器
实例预览 Endless scroll 无限滚动
实例预览 Flexible width 弹性布局
实例预览 Lightbox 支持灯窗插件
实例预览 Load it all 动态读取图片尺寸
实例预览 Placeholders 底部占位符
实例预览 PHP server PHP 加载数据
实例预览 Remote API 远程 API 加载数据
实例预览 Filtering Or 筛选功能
实例预览 Filtering And 筛选功能
实例预览 Filtering Only 筛选功能
实例预览 Filtering Fade 筛选功能
实例预览 sorting排序基本示例
实例预览 stamping基本示例
使用方法
载入 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"。 |
direction | undefined | 排序方向。可设置为:"left"(从左至右), "right"(从右至左)
若不设置,则判断 align 为 "right" 时,direction 为 "right",否则默认为 "left"。 |
autoResize | false | 是否在浏览器窗口大小变化时进行重新布局。 |
resizeDelay | 50 | 检测自动重新布局的间隔时间 (ms)。 |
itemWidth | 0 | 列表项目的宽度 (px 或 %)。 |
flexibleWidth | 0 | 列表项目自适应的最大宽度。该项设置时,itemWidth 的值作为列表项目的最小宽度。 |
offset | 2 | 列表项目的间距 (px),横向纵向相同。 |
verticalOffset | undefined | 列表项目纵向的间距 (px),与 offset 配合即可分别设置横向与纵向的间距。 |
outerOffset | 0 | 外部间距,与父容器顶部的间距。 |
ignoreInactiveItems | true | 是否隐藏被过滤的项目。 |
fillEmptySpace | false | 是否填充底部占位符。占位符的 class 为 "wookmark-placeholder"。 |
comparator | null | 自定义排序方法。 |
possibleFilters | [] | |
onLayoutChanged | undefined | 布局变化时触发的函数。 |
相关推荐
jQuery Wookmark瀑布流插件
瀑布流布局非常适合大量图片的展示,一改过去裁剪图片尺寸统一的排版,每张图片都能完全展示,并错落有致,让人眼前一亮。
jquery wookmark 瀑布流
jquery版图片瀑布流布局效果演示源码下载
jQuery Wookmark瀑布流特效.zip
代码简介: jQuery手机端瀑布流布局代码是一款基于jQuery HTML5实现的可自定义响应式手机电脑端瀑布流特效。
代码简介:jquery图片列表瀑布流布局代码是一款基于jquery实现的简单图片列表瀑布流布局代码,没有无限加载功能。
jQuery实现的瀑布流布局的图片特效代码
jquery简单的瀑布流布局点击无限加载效果代码
jQuery响应式图片瀑布流布局代码基于jquery-1.8.3.min.js制作,响应式设计,无限加载。
JQuery wookmark 瀑布流代码实例,现在很流行的一种网页布局效果,瀑布流,随意、洒脱,个性十足,一种代表时尚潮流的网页设计风格。
JQuery LazyLoad 图片懒加载实例,相关描述可查看我的博文“JQuery.LazyLoad 实现图片懒加载”
jquery实现瀑布流布局方式,分享下!
jQuery实现的瀑布流布局的图片特效代码.rarjQuery实现的瀑布流布局的图片特效代码.rarjQuery实现的瀑布流布局的图片特效代码.rarjQuery实现的瀑布流布局的图片特效代码.rarjQuery实现的瀑布流布局的图片特效代码....
jQuery瀑布流图片布局实例,一种当下流行的图片列表特效,本效果的图片是按比例缩小的,8种不同布局方法的瀑布流效果,有横向按比例显示缩略图,也有竖向按比例显示的,喜欢瀑布流而不知道如何实现的,这一款jquery...