jquery瀑布流插件(WookMark)

李维亮

发布于 2021-07-09 03:30:19

1.6K00

代码可运行

文章被收录于专栏：李维亮的博客李维亮的博客

运行总次数：0

代码可运行

谈起Wookmark我想做过前端的大侠都不会觉得陌生，它就是远近闻名的流布局jQuery插件，这个插件使用起来非常简单，需要引入两个js：

<script src="/js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.wookmark.min.js"></script>

jquery实例：Wookmark使用方法

引入核心文件

<!-- 引入jquery -->
<script src="../libs/jquery.min.js"></script>

<!-- 引入wookmark插件 -->
<script src="../jquery.wookmark.js"></script>

构建html

<div id="main" role="main">
    <ul id="tiles">
        <!-- These are our grid blocks -->
        <li><img src="../sample-images/image_1.jpg" width="200" height="283"><p>1</p></li>
        <li><img src="../sample-images/image_2.jpg" width="200" height="300"><p>2</p></li>
        <li><img src="../sample-images/image_3.jpg" width="200" height="252"><p>3</p></li>
        <li><img src="../sample-images/image_4.jpg" width="200" height="158"><p>4</p></li>
        <li><img src="../sample-images/image_5.jpg" width="200" height="300"><p>5</p></li>
        <li><img src="../sample-images/image_6.jpg" width="200" height="297"><p>6</p></li>
        <li><img src="../sample-images/image_7.jpg" width="200" height="200"><p>7</p></li>
        <li><img src="../sample-images/image_8.jpg" width="200" height="200"><p>8</p></li>
        <!-- 可添更多的内容 -->
    </ul>
</div>

写入JS初始化

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

参数

$('.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,
  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 – item的宽度，可以是像素，也可以是百分比。默认为第一个项目的宽度。 fillEmptySpace – 如果为 "true",在每一列的底部会用一个空白的item填满对齐。 flexibleWidth – "true" or "false", 基于浏览器的大小动态调整item的最佳尺寸。 offset – item与item间横向坚向的间隔, 默认为 2 onLayoutChanged – 图层改变后调用的函数 outerOffset – 默认值 "0"

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2015-11-04，如有侵权请联系 cloudcommunity@tencent.com 删除

node.js