怎么用JavaScript和jQuery實(shí)現(xiàn)瀑布流

這篇文章主要介紹“怎么用JavaScript和jQuery實(shí)現(xiàn)瀑布流”，在日常操作中，相信很多人在怎么用JavaScript和jQuery實(shí)現(xiàn)瀑布流問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”怎么用JavaScript和jQuery實(shí)現(xiàn)瀑布流”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

創(chuàng)新互聯(lián)公司長(zhǎng)期為成百上千客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為懷化企業(yè)提供專業(yè)的成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)，懷化網(wǎng)站改版等技術(shù)服務(wù)。擁有十余年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

用JavaScript實(shí)現(xiàn)

基本結(jié)構(gòu)：

<div id="main">
 <div class="box">
  <div class="pic"><img src="images/1.jpg" alt=""></div>
 </div>
 <div class="box">
  <div class="pic"><img src="images/2.jpg" alt=""></div>
 </div>
  ...
  ...
  ...
 </div>

基本樣式：

*{
 margin: 0px;
 padding: 0px;
 }
 #main{
 position: relative;
 }
 .box{
 padding: 15px 0 0 15px;
 float: left;
 }
 .pic{
 padding: 10px;
 border: 1px solid #ccc;
 border-radius: 5px;
 box-shadow: 0 0 5px #ccc;
 }

思路：

1、獲取#main下的所有.box

2、計(jì)算頁(yè)面中圖片有幾列，并設(shè)置頁(yè)面的寬度

3、找出這幾列中高度最小的列

4、從第二行開始，設(shè)置圖片為相對(duì)定位，把一張圖片放到高度最小列的下面

5、更新列的高度，重復(fù)3、4、5步驟，直至圖片加載完

6、根據(jù)最后一張圖片的位置確定是否繼續(xù)加載圖片（懶加載）

實(shí)現(xiàn)：

1、獲取#main下的所有.box

  //將main下的所有class為box的元素取出來(lái)
  var oParent = document.getElementById(parent);
  var oBox = getByClass(oParent,box);
// 根據(jù)class獲取元素
 function getByClass(parent,clsname){
  var arr = [];//用來(lái)存儲(chǔ)獲取到的所有class為box的元素
  var oElement = parent.getElementsByTagName('*');
  for(var i=0;i<oElement.length;i++){
  if(oElement[i].className == clsname){
   arr.push(oElement[i]);
  }
  }
  return arr;
 }

2、計(jì)算頁(yè)面中圖片有幾列，并設(shè)置頁(yè)面的寬度

  //計(jì)算整個(gè)頁(yè)面顯示的列數(shù)（頁(yè)面寬/box的寬）
  var oBoxW = oBox[0].offsetWidth;
  var cols = Math.floor(document.documentElement.clientWidth/oBoxW);
  //設(shè)置main的寬
  oParent.style.cssText = 'width:' + oBoxW*cols + 'px;margin:0 auto;';

3、找出這幾列中高度最小的列

4、從第二行開始，設(shè)置圖片為相對(duì)定位，把一張圖片放到高度最小列的下面

5、更新列的高度，重復(fù)3、4、5步驟，直至圖片加載完

//存儲(chǔ)每列的高度
  var hArr = [];
  for(var i=0;i<oBox.length;i++){
  if(i<cols){
   //第一行圖片的高度
   hArr.push(oBox[i].offsetHeight);
  }else{
   var minH = Math.min.apply(null,hArr);
   var index = getMinIndex(hArr,minH);
   oBox[i].style.position = "absolute";
   oBox[i].style.top = minH + 'px';
   //oBox[i].style.left = oBoxW*index+'px';
   oBox[i].style.left = oBox[index].offsetLeft + 'px';
   //更新每列的高度
   hArr[index] += oBox[i].offsetHeight;
  }
  }
//獲取每列高度最小的索引值
 function getMinIndex(arr,value){
  for(var i in arr){
  if(arr[i] == value){
   return i;
  }
  }
 }

6、根據(jù)最后一張圖片的位置確定是否繼續(xù)加載圖片（懶加載）

假設(shè)是后臺(tái)給的數(shù)據(jù)

  //數(shù)據(jù)
  var dataInt = {'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]};　　

當(dāng)滾動(dòng)條滾動(dòng)時(shí)執(zhí)行

  //滾動(dòng)條滾動(dòng)時(shí)
  window.onscroll = function(){
  scrollSlide(dataInt);
  }　　

根據(jù)最后一張圖片的位置，來(lái)判斷是否進(jìn)行加載

//判斷是否具有了滾條加載數(shù)據(jù)塊的條件
 function checkScrollSlide(parent,clsname){
  var oParent = document.getElementById(parent);
  var oBox = getByClass(oParent,clsname);
  var lastBoxH = oBox[oBox.length-1].offsetTop + Math.floor(oBox[oBox.length-1].offsetHeight/2);
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  var height = document.documentElement.clientHeight || document.body.clientHeight;
  return (lastBoxH < scrollTop + height)? true:false;
 }

加載圖片

//滾動(dòng)條滾動(dòng)時(shí)執(zhí)行
 function scrollSlide(dataInt){
  ////判斷是否具有了滾條加載數(shù)據(jù)塊的條件
  if(checkScrollSlide('main','box')){
  var oParent = document.getElementById('main');
  //將數(shù)據(jù)塊渲染到當(dāng)前頁(yè)面的尾部
  for(var i=0;i<dataInt.data.length;i++){
   var oBoxs = document.createElement('div');
   oBoxs.className = 'box';
   oParent.appendChild(oBoxs);
   var oPic = document.createElement('div');
   oPic.className = 'pic';
   oBoxs.appendChild(oPic);
   var oImg = document.createElement('img');
   oImg.src = 'images/' + dataInt.data[i].src;
   oPic.appendChild(oImg);
  }
  waterfall('main','box');
  }

用jQurey實(shí)現(xiàn)

用jQuery實(shí)現(xiàn)的思路都是一樣的，就直接放代碼

$(window).on('load',function(){
  waterfall();
  var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]};
  $(window).on('scroll',function(){
  scrollSlide(dataInt);
  })
 });
 function waterfall(){
  var $oBox = $('#main>div');
  var oBoxW = $oBox.eq(0).outerWidth();
  var cols = Math.floor($(window).width()/oBoxW);
  $('#main').css({
  'width' : cols * oBoxW,
  'margin' : '0 auto'
  });
  var hArr = [];
  $oBox.each(function(index,value){
  var oBoxH = $oBox.eq(index).height();
  if(index<cols){
   hArr.push(oBoxH);
  }else{
   var minH = Math.min.apply(null,hArr);
   var minHIndex = $.inArray(minH,hArr);
   $(value).css({
   'position' : 'absolute',
   'top': minH + 15,
   'left' : $oBox.eq( minHIndex ).position().left
   });
   hArr[minHIndex] += $oBox.eq(index).height() + 15;
  }
  });
 }
 function checkScrollSlide(){
  var $lastBox = $('#main>div').last();
  var lastBoxH = $lastBox.offset().top + Math.floor($lastBox.height()/2);
  var scrollTop = $(window).scrollTop();
  var clientH = $(window).height();
  return (lastBoxH < scrollTop + clientH) ? true : false;
 }
 function scrollSlide(dataInt){
  if(checkScrollSlide()){
  $.each(dataInt.data,function(index,value){
   var $Box = $('<div>').addClass('box').appendTo('#main');
   var $Pic = $('<div>').addClass('pic').appendTo($Box);
   $('<img>').attr('src','images/' + $(value).attr('src')).appendTo($Pic);
  })
  waterfall();
  }
 }

到此，關(guān)于“怎么用JavaScript和jQuery實(shí)現(xiàn)瀑布流”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！

網(wǎng)站題目：怎么用JavaScript和jQuery實(shí)現(xiàn)瀑布流
文章網(wǎng)址：http://bm7419.com/article18/igosdp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁(yè)設(shè)計(jì)公司、ChatGPT、網(wǎng)站導(dǎo)航、電子商務(wù)、網(wǎng)站制作、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

網(wǎng)站托管運(yùn)營(yíng)