jQuery插件之Wookmark瀑布流

使用方法：

2、构建html

<div class="wrapper">

  <div id="con1_1">

      <div class="product_list"> <a href="#"><img src="data:images/img6.jpg"></a><p>1</p></div>

    <div class="product_list"> <a href="#"><img src="data:images/img4.jpg"></a><p>2</p> </div>

    <div class="product_list"> <a href="#"><img src="data:images/img1.jpg"></a><p>3</p></div>

    <div class="product_list"> <a href="#"><img src="data:images/img2.jpg"></a><p>4</p></div>

    <div class="product_list"> <a href="#"><img src="data:images/img3.jpg"></a><p>5</p></div>

    <div class="product_list"> <a href="#"><img src="data:images/img5.jpg"></a><p>6</p></div>

        <div class="product_list"> <a href="#"><img src="data:images/img8.jpg"></a><p>7</p></div>

    <div class="product_list"> <a href="#"><img src="data:images/img7.jpg"></a><p>8</p></div>

  </div>

</div>

3、直接js调用则

<script type="text/javascript" src="js/wookmark.min.js"></script>

  <script type="text/javascript">

    window.onload = function () {

      var wookmark1 = new Wookmark('#con1_1', {

          outerOffset: 10, // Optional, the distance to the containers border

          itemWidth: 200 // Optional, the width of a grid item

      });

    };

  </script>

如果是jquery调用则：

  <script type="text/javascript" src="js/jquery.js"></script>

  <script type="text/javascript" src="js/wookmark.min.js"></script>

  <script type="text/javascript">

  $('#con1_1').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

});

  </script>

参数说明：

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"

下载>>

秒客网

jQuery插件之Wookmark瀑布流

相关文章