日韩亚洲AV无码一区二区三区|av在线国产哟哟|国产精品人人爽人人爽AV|免费一区二区精品无码视频

<th id="kwciy"><video id="kwciy"></video></th>
<code id="kwciy"><em id="kwciy"><optgroup id="kwciy"></optgroup></em></code>
    1. <center id="kwciy"></center>

      <code id="kwciy"></code>

      0712-2888027 189-8648-0214
      微信公眾號(hào)

      孝感風(fēng)信網(wǎng)絡(luò)科技有限公司微信公眾號(hào)

      當(dāng)前位置:主頁 > 技術(shù)支持 > Javascript/JQuery > jquery動(dòng)態(tài)網(wǎng)格瀑布流插件Wookmark

      jquery動(dòng)態(tài)網(wǎng)格瀑布流插件Wookmark

      時(shí)間:2016-06-02來源:風(fēng)信官網(wǎng) 點(diǎn)擊: 714次

      Wookmark是Wookmark.com為了讓親們輕松的創(chuàng)建出其網(wǎng)站的效果而做的一個(gè)jquery動(dòng)態(tài)網(wǎng)格瀑布流插件,參數(shù)豐富,使用簡(jiǎn)單。源碼中包含了許多實(shí)例,大大的方便于項(xiàng)目的使用。

      jquery動(dòng)態(tài)網(wǎng)格瀑布流

      jquery實(shí)例:Wookmark使用方法

      引入核心文件

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

      構(gòu)建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>
              <!-- 可添更多的內(nèi)容 -->
            </ul>
       
          </div>

      寫入JS初始化

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

      參數(shù)

      $('.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 – 默認(rèn) "50"毫秒, 瀏覽器改變大小與圖片更新間的間隔時(shí)長

      comparator -自定義排序函數(shù)

      container -裝載動(dòng)態(tài)網(wǎng)格的元素, 默認(rèn) "window". 如 $('myContentGrid'). 該容器需要要CSS屬性 "position: relative".

      direction – "left" 或者 "right", 從左上角還是右上角開始

      ignoreInactiveItems – 如果為 "true",激活的項(xiàng)目是可見的, 用可過濾項(xiàng)目

      itemWidth – item的寬度,可以是像素,也可以是百分比。 默認(rèn)為第一個(gè)項(xiàng)目的寬度。

      fillEmptySpace – 如果為 "true",在每一列的底部會(huì)用一個(gè)空白的item填滿對(duì)齊。

      flexibleWidth – "true" or "false", 基于瀏覽器的大小動(dòng)態(tài)調(diào)整item的最佳尺寸。

      offset – item與item間橫向堅(jiān)向的間隔, 默認(rèn)為 2

      onLayoutChanged – 圖層改變后調(diào)用的函數(shù)

      outerOffset – 默認(rèn)值 "0"

      演示地址:http://www.jqcool.net/demo/201410/jquery-wookmark/

      中文文檔說明:http://code.ciaoca.com/jquery/wookmark/demo/load-images

      欄目列表
      推薦內(nèi)容
      熱點(diǎn)內(nèi)容
      展開