成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

自己封裝的瀑布流插件，含最詳細注釋，簡單易懂。

Reducto / 2268人閱讀

摘要：基于的插件相當于下面開始封裝。下面調(diào)用演示模板此處請多個花非花，霧非霧，夜半來，天明去，來如春夢不多時。

基于jquery的插件fn相當于prototype,下面開始封裝。

$.fn.waterFall=function (option) {   //option  用戶傳過來的{gap:15}

    var defaults = {gap:20} //默認值

    defaults = $.extend(defaults,option);  //如果用戶傳參數(shù)，以用戶為準合并

    var _this = $(this); //_this就是最父級，裝載圖片和文字的盒子

    var allItem = _this.children(".item");  //獲取父級下每一個的 元素

    var itemWidth = allItem.width(); //獲取每一個item的寬度

    var count = Math.floor(_this.width()/(itemWidth+defaults.gap)); //向下取整，算出每一行最多可放的列數(shù)

    var arr = []; //創(chuàng)建一個空數(shù)組，方便存儲每一列的高度

    allItem.each(function (index,ele) {  //遍歷每一個item
        if(indexarr[i]){
                    minHeight=arr[i];
                    minkey = i
                }
            }

            var height = $(ele).height()
            $(ele).css({
                "top":minHeight+defaults.gap+"px",
                "left":minkey*(itemWidth+defaults.gap)+"px" //從第二行開始最小的高度
            })

            //動態(tài)更新最小列的高度
            arr[minkey]+=height+defaults.gap
        }
    })

    //算出所有列的高度，給外層父元素加上。

    var maxHeight = arr[0];

    for(var i =0;i

下面調(diào)用演示:


dom模板：



      

         
          

              
              
花非花，霧非霧，夜半來，天明去，來如春夢不多時。

          

      

  
    
  


js部分：


$(".items").waterFall({gap:15});

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/107506.html

相關(guān)文章

  • 懶加載、瀑布流和LightBox實現(xiàn)圖片搜索效果

    摘要：無非就是獲取用戶輸入的獲取圖片信息組裝填充頁面數(shù)據(jù)瀑布流布局處理在頁面滾動時判斷最后一張圖片是否可見，如果是則重復(fù)以上內(nèi)容查看源碼 開始 做一個小項目，算是對js和jQuery的一次練習吧。 圖片資源來自這個網(wǎng)站（上面有很多高清圖片關(guān)鍵還是免費下載的）：https://unsplash.com/ 項目具體效果可以點這里：https://bjw1234.github.io/ima......

    rainyang 評論0 收藏0

  • 瀑布流之實例進階

    摘要：瀑布流也應(yīng)該算是流行幾年了吧。開始刷新的設(shè)置就很簡單了，瀑布流刷新只和一個事件有關(guān)，即，主要的算法即，當頁面滑動到最低高度的時候開始加載節(jié)點并且添加，當然，節(jié)點添加的個數(shù)是不固定的。這時候，就需要獲取實際尺寸然后進行一個計算才行。 瀑布流也應(yīng)該算是流行幾年了吧。首先是由Pinterest掀起的浪潮，然后國內(nèi)設(shè)計如雨后春筍般，冒出很多瀑布流的例子，比如，蘑菇街，Mark之(不過最近涉黃，...

    Baoyuan 評論0 收藏0

  • 原生 JS 實現(xiàn)一個瀑布流插件

    摘要：瀑布流布局中的圖片有一個核心特點等寬不定等高，瀑布流布局在國內(nèi)網(wǎng)網(wǎng)站都有一定規(guī)模的使用，比如花瓣網(wǎng)等等。那么接下來就基于這個特點開始瀑布流探索之旅。 showImg(https://segmentfault.com/img/remote/1460000013059759?w=640&h=280); 瀑布流布局中的圖片有一個核心特點 —— 等寬不定等高，瀑布流布局在國內(nèi)網(wǎng)網(wǎng)站都有一定規(guī)模...

    Alfred 評論0 收藏0

  • 原生 JS 實現(xiàn)一個瀑布流插件

    摘要：瀑布流布局中的圖片有一個核心特點等寬不定等高，瀑布流布局在國內(nèi)網(wǎng)網(wǎng)站都有一定規(guī)模的使用，比如花瓣網(wǎng)等等。那么接下來就基于這個特點開始瀑布流探索之旅。 showImg(https://segmentfault.com/img/remote/1460000013059759?w=640&h=280); 瀑布流布局中的圖片有一個核心特點 —— 等寬不定等高，瀑布流布局在國內(nèi)網(wǎng)網(wǎng)站都有一定規(guī)模...

    lavnFan 評論0 收藏0

  • 原生 JS 實現(xiàn)一個瀑布流插件

    摘要：瀑布流布局中的圖片有一個核心特點等寬不定等高，瀑布流布局在國內(nèi)網(wǎng)網(wǎng)站都有一定規(guī)模的使用，比如花瓣網(wǎng)等等。那么接下來就基于這個特點開始瀑布流探索之旅。 showImg(https://segmentfault.com/img/remote/1460000013059759?w=640&h=280); 瀑布流布局中的圖片有一個核心特點 —— 等寬不定等高，瀑布流布局在國內(nèi)網(wǎng)網(wǎng)站都有一定規(guī)模...

    wenyiweb 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<