99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区

(function ($) {
 $.fn.extend({
  myWaterfull: function () {

   var parentWidth = $(this).width(); //獲取每行的寬度
   var childItems = $(this).children();
   var childWidth = childItems.width(); //獲取每一列的列寬
   var column = 5; //定義每行有多少列
   //計(jì)算并設(shè)置列與列之間的間隙
   var space = (parentWidth - column * childWidth) / (column - 1);
   //聲明一個(gè)數(shù)組，用來存放第一行中每一列的高度
   var arrHeight = [];

   //對(duì)子元素進(jìn)行排列布局
   $.each(childItems, function (index, item) {
    if (index < column) { //對(duì)第一行的列進(jìn)行排列布局
     $(item).css({
      top: 0,
      left: index * (childWidth + space)
     });
     arrHeight.push($(item).height() + space); //將第一行中的列的高度添加到數(shù)組中
    } else {
     //找尋列高最小的那一列
     var minIndex = 0;
     var minValue = arrHeight[minIndex];
     //循環(huán)遍歷找出最小的列高值
     for (var i = 0; i < arrHeight.length; i++) {
      if (minValue > arrHeight[i]) {
       minValue = arrHeight[i];
       minIndex = i;
      }
     }

     //對(duì)余下的子元素挨個(gè)排列布局
     $(item).css({
      top: minValue + space,
      left: minIndex * (childWidth + space)
     });

     //更新最小列高
     arrHeight[minIndex] += $(item).height() + space;
    }
   });

   //由于這里是利用定位對(duì)子元素進(jìn)行布局，所以要更新父元素的高度
   //當(dāng)然也可以利用浮動(dòng)對(duì)子元素進(jìn)行布局
   var maxHeight = 0;
   for (var i = 0; i < arrHeight.length; i++) {
    if (maxHeight < arrHeight[i]) {
     maxHeight = arrHeight[i];
    }
   }

   //設(shè)置父元素的高度
   $(this).height(maxHeight);

  }
 });
})(jQuery);

書寫腳本文件，這里假設(shè)從后臺(tái)獲取子元素的數(shù)據(jù)，并用artTemplate模板引擎將數(shù)據(jù)渲染到頁面：

//定義引擎模板


//書寫腳本
$(function () {
 //根據(jù)接口文檔，向服務(wù)器請(qǐng)求數(shù)據(jù)
 var page = 1, pageSize = 20;
 //當(dāng)DOM結(jié)構(gòu)加載完畢，就調(diào)用一次render函數(shù)
 render();
 function render() {
  $.ajax({
   type: "get",
   url: "php/data.php",
   data: {
    page: page,
    pageSize: pageSize
   },
   beforeSend: function () { //在發(fā)送請(qǐng)求前改變按鈕的內(nèi)容
    $(".btn").html("正在加載...").addClass("loading");
   },
   success: function (data) {
    //2.借助模板引擎，渲染數(shù)據(jù)
    var tplStr = template("template", data);
    $(".items").append(tplStr);
    $(".items").myWaterfull();
    //當(dāng)加載完成后，改變按鈕內(nèi)容和樣式
    $(".btn").html("加載更多").removeClass("loading");
    //當(dāng)后臺(tái)數(shù)據(jù)展示完畢時(shí)，向用戶提示
    if (data.items.length < pageSize) {
     $(".btn").html("沒有更多內(nèi)容了").addClass("loading");
    }
    //每次響應(yīng)成功后，將從后臺(tái)返回的page保存起來
    page = data.page;
   }
  });
 }

 //當(dāng)點(diǎn)擊按鈕時(shí)，加載下一頁數(shù)據(jù)
 $(".btn").on('click',function () {
  if($(".btn").hasClass("loading")) return false;
  render();
 });

 //當(dāng)頁面滾動(dòng)到數(shù)據(jù)底部的時(shí)候加載數(shù)據(jù)
 $(window).on('scroll',function () {
  //判斷是否滾動(dòng)到底部
  var isBottom = ($('.items').height()-($(window).height()-$('.items').offset().top))-$(window).scrollTop();
  if (isBottom <= 200 && !$('.btn').hasClass("loading")) render();
 });


});

以上是“js如何自定義瀑布流布局插件”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。