国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

Reducto / 2192人閱讀

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

基于jquery的插件fn相當(dāng)于prototype,下面開始封裝。

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

    var defaults = {gap:20} //默認(rèn)值

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

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

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

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

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

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

    allItem.each(function (index,ele) {  //遍歷每一個(gè)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" //從第二行開始最小的高度
            })

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

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

    var maxHeight = arr[0];

    for(var i =0;i

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


dom模板：



      

         
          

              
              
花非花，霧非霧，夜半來，天明去，來如春夢(mèng)不多時(shí)。

          

      

  
    
  


js部分：


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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/107506.html

相關(guān)文章

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

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

    rainyang 評(píng)論0 收藏0

  • 瀑布流之實(shí)例進(jìn)階

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

    Baoyuan 評(píng)論0 收藏0

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

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

    Alfred 評(píng)論0 收藏0

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

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

    lavnFan 評(píng)論0 收藏0

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

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

    wenyiweb 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<