DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 瀑布流的實現方式(原生js+jquery+css3)
瀑布流的實現方式(原生js+jquery+css3)
編輯:關於JavaScript     

前言
 項目需求要弄個瀑布流的頁面,用的是waterfall這個插件,感覺還是可以的,項目趕就沒自己的動手寫。最近閒來沒事,就自己寫個。大致思路理清楚,還是挺好實現的... 

原生javascript版 

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>瀑布流-javascript</title>
 <style>
 *{margin:0;padding:0;}
 #content{position: relative;margin:0 auto;}
 .box{padding:10px;float: left;}/*首行浮動,第二行開始絕對定位*/
 .box img{width: 180px;height:auto;display: block;}
 </style>
 <script>
 window.onload=function(){
  waterfall('content','box');
  
  //改變窗口大小時,重新排列
  window.onresize = function(){
  waterfall('content','box');
  }
  
  //如果數據不夠,沒出現滾動條,自動加載數據
  var time=setInterval(function(){
  if(checkscrollside()){
   addDate();//插入數據
   waterfall('content','box');//加載完數據從新排列
  }else{
   clearInterval(time);
   window.onscroll=function(){
   if(checkscrollside()){
    addDate();
    waterfall('content','box');
   };
   }
  }
  },1000) 
  
 } 
 // 數據插入
 function addDate(){
  var dataInt=['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg','6.jpg','7.jpg','8.jpg'];//模擬數據,也可以是對象
  var oParent = document.getElementById('content');
  for(var i=0;i<dataInt.length;i++){//循環插入數據 
  var oBox=document.createElement('div');
  oBox.className='box';
  oParent.appendChild(oBox);
  var oImg=document.createElement('img');
  oImg.src='./img/'+dataInt[i];
  oBox.appendChild(oImg);
  }
 }
 //主函數
 function waterfall(parentID,childClass){
  var oParent=document.getElementById(parentID);
  var arrBox=getClassObj(parentID,childClass);// getClassObj()獲取子class的數組
  var iBoxW=arrBox[0].offsetWidth;// 獲取瀑布流塊的寬度
  var num=Math.floor(document.documentElement.clientWidth/iBoxW);//計算窗口能容納幾列
  oParent.style.width=iBoxW*num+'px';//設置父級寬度
  var arrBoxH=[];//數組,用於存儲每列中的所有塊框相加的高度
  for(var i=0;i<arrBox.length;i++){//遍歷數組瀑布流 塊
  var boxH=arrBox[i].offsetHeight;//獲取當前塊的高度
  if(i<num){
   arrBox[i].style.cssText="";//防止用戶改變窗口大小,到時樣式出錯
   arrBoxH[i]=boxH; //第一行中的num個塊box 先添加進數組arrBoxH
  }else{
   var minH=Math.min.apply(null,arrBoxH);//獲取數組arrBoxH中的最小值minH
   var minHIndex=getminHIndex(arrBoxH,minH);//遍歷數組獲取最小值minH的索引
   arrBox[i].style.position='absolute';//設置絕對位移
   arrBox[i].style.top=minH+'px';
   arrBox[i].style.left=minHIndex*iBoxW+'px';//也可以直接獲取arrBox[minHIndex].offsetLeft
   arrBoxH[minHIndex]+=arrBox[i].offsetHeight;//添加後,更新最小列高
  }
  }
 }
 //獲取子class的數組
 function getClassObj(parentID,childClass){
  var oParent=document.getElementById(parentID);
  var allChildObj=oParent.getElementsByTagName('*');//獲取父級下的所有子集
  var childObj=[];//創建一個數組 用於收集子元素
  for (var i=0;i<allChildObj.length;i++) {//遍歷子元素、判斷類別、壓入數組
  if (allChildObj[i].className==childClass){
   childObj.push(allChildObj[i]);
  }
  };
  return childObj;
 }
 //獲取數組最小值的索引
 function getminHIndex(arr,minH){
  for(var i in arr){
  if(arr[i]==minH){
   return i;
  }
  }
 }
 // 判斷滾動條是否到底部
 function checkscrollside(){
  var arrBox=getClassObj("content",'box');
  //獲取最後一個瀑布流塊的高度:距離網頁頂部(實現未滾到底就開始加載)
  var lastBoxH=arrBox[arrBox.length-1].offsetTop;
  var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//獲取滾動條卷走的高度
  var documentH=document.documentElement.clientHeight;//顯示頁面文檔的高
  return (lastBoxH<scrollTop+documentH)?true:false;//到達指定高度後 返回true,觸發waterfall()函數
 }
 </script>
</head>
<body>
 <div id="content">
 <div class="box"><img src="img/0.jpg" alt=""></div>
 <div class="box"><img src="img/1.jpg" alt=""></div>
 <div class="box"><img src="img/2.jpg" alt=""></div>
 <div class="box"><img src="img/3.jpg" alt=""></div>
 <div class="box"><img src="img/4.jpg" alt=""></div>
 <div class="box"><img src="img/5.jpg" alt=""></div>
 <div class="box"><img src="img/6.jpg" alt=""></div>
 <div class="box"><img src="img/7.jpg" alt=""></div>
 <div class="box"><img src="img/8.jpg" alt=""></div>
 <div class="box"><img src="img/9.jpg" alt=""></div>
 <div class="box"><img src="img/10.jpg" alt=""></div>
 </div>
</body>
</html>

jquery版本 

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>瀑布流-jquery</title>
 <style>
 *{margin:0;padding:0;}
 #content{position: relative;margin:0 auto;}
 .box{padding:10px;float: left;}
 .box img{width: 180px;height:auto;display: block;}
 </style>
 <script src="js/jquery-1.11.1.min.js"></script>
 <script>
 $(function(){
  waterfall();
  
  //改變窗口大小時,重新排列
  $(window).resize(function(){
  waterfall();
  })
  
  //如果數據不夠,沒出現滾動條,自動加載數據
  var time=setInterval(function(){
  if(checkscrollside()){
   addDate();//插入數據
   waterfall();//加載完數據從新排列
  }else{
   clearInterval(time);
   $(window).scroll(function(){
   if(checkscrollside()){
    addDate();
    waterfall();
   };
   })
  }
  },1000) 
  
 }) 
 // 數據插入
 function addDate(){
  var dataInt=['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg','6.jpg','7.jpg','8.jpg'];//模擬數據,也可以是對象
  var oParent = $('#content');
  for(var i=0;i<dataInt.length;i++){//循環插入數據
  oParent.append('<div class="box"><img src="./img/'+dataInt[i]+'" alt=""></div>'); 
  }
 }
 //主函數
 function waterfall(){
  var arrBox=$('#content').children('.box');// box對象
  var iBoxW=arrBox.eq(0).innerWidth();// 獲取瀑布流塊的寬度,注意width(),跟innerWidth()的區別
  var num=Math.floor($(window).width()/iBoxW);//計算窗口能容納幾列
  $('#content').css('width',iBoxW*num);//設置父級寬度
  var arrBoxH=[];//數組,用於存儲每列中的所有塊框相加的高度
  for(var i=0;i<arrBox.length;i++){//遍歷數組瀑布流 塊
  var boxH=arrBox.eq(i).innerHeight();//獲取當前塊的高度
  if(i<num){
   arrBox.eq(i).attr('style','');//防止用戶改變窗口大小,到時樣式出錯
   arrBoxH[i]=boxH; //第一行中的num個塊box 先添加進數組arrBoxH
  }else{
   var minH=Math.min.apply(null,arrBoxH);//獲取數組arrBoxH中的最小值minH
   var minHIndex=$.inArray(minH,arrBoxH);//使用jquery提供的工具
   arrBox.eq(i).css({'position':'absolute','top':minH,'left':minHIndex*iBoxW});//設置定位
   arrBoxH[minHIndex]+=arrBox.eq(i).innerHeight();//添加後,更新最小列高
  }
  }
 }
 // 判斷滾動條是否到底部
 function checkscrollside(){
  var arrBox=$('#content').children('.box');
  //獲取最後一個瀑布流塊的高度:距離網頁頂部(實現未滾到底就開始加載)
  var lastBoxH=arrBox.eq(arrBox.length-1).offset().top;
  var scrollTop=$(window).scrollTop()//獲取滾動條卷走的高度
  var documentH=$(window).height();;//顯示頁面文檔的高
  return (lastBoxH<scrollTop+documentH)?true:false;//到達指定高度後 返回true,觸發waterfall()函數
 }
 </script>
</head>
<body>
 <div id="content">
 <div class="box"><img src="img/0.jpg" alt=""></div>
 <div class="box"><img src="img/1.jpg" alt=""></div>
 <div class="box"><img src="img/2.jpg" alt=""></div>
 <div class="box"><img src="img/3.jpg" alt=""></div>
 <div class="box"><img src="img/4.jpg" alt=""></div>
 <div class="box"><img src="img/5.jpg" alt=""></div>
 <div class="box"><img src="img/6.jpg" alt=""></div>
 <div class="box"><img src="img/7.jpg" alt=""></div>
 <div class="box"><img src="img/8.jpg" alt=""></div>
 <div class="box"><img src="img/9.jpg" alt=""></div>
 <div class="box"><img src="img/10.jpg" alt=""></div>
 </div>
</body>
</html>

大致思路
 1.先讓第一行的浮動
 2.計算第一行的每個塊的高度
 3.遍歷第一行之後的每一個塊,逐個放在最小高度的下面
 4.加載數據插入最後,再重新計算 
注意點
 a.原生js 
1.定義了getClassObj()函數用於獲取class類的對象,方便調用。考慮了兼容性 getElementsByClassName  
2.定義了getminHIndex()函數用戶獲取最小值的索引 
3.設置塊與塊之間的距離最好用padding,這樣的話offsetHeight可以直接獲取得到高度。如果設置margin則得多加個外邊距的距離 
4.代碼中設置了定時器加載數據,其實可以省略,只要保證第一次加載的數據能滿屏就可以。如果沒出現滾動條的話onscroll事件是不會執行到的。也就沒辦法加載數據了 
5.代碼中的計算寬度也可以修改,設計的頁面是定寬的瀑布流的話。這裡主要是做了響應式的處理 

var arrBox=getClassObj(parentID,childClass);// getClassObj()獲取子class的數組
var iBoxW=arrBox[0].offsetWidth;// 獲取瀑布流塊的寬度
var num=Math.floor(document.documentElement.clientWidth/iBoxW);//計算窗口能容納幾列
oParent.style.width=iBoxW*num+'px';//設置父級寬度 

6.每設置一塊位移,都要在列高的數組上增加數值,防止塊重疊 

arrBox[i].style.position='absolute';//設置絕對位移
arrBox[i].style.top=minH+'px';
arrBox[i].style.left=minHIndex*iBoxW+'px';//也可以直接獲取arrBox[minHIndex].offsetLeft
arrBoxH[minHIndex]+=arrBox[i].offsetHeight;//添加後,更新最小列高 

 b.jquery
 1.思路是跟js一樣的,只是jquery封裝了很多方法,讓我們簡便的就實現了
 2.注意width(),跟innerWidth()的區別。前者只能獲取寬度值(不包括補白padding) 

css3版本

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>瀑布流-css3</title>
 <style>
 *{margin:0;padding:0;}
 #content{margin:0 auto;position: relative;width:1200px;column-count:6;-moz-column-count:6;-webkit-column-count:6;}
 .box{padding:10px;width: 180px;}
 .box img{width: 180px;height:auto;display: block;}
 </style>
 <script>
 window.onload=function(){
  //如果數據不夠,沒出現滾動條,自動加載數據
  var time=setInterval(function(){
  if(checkscrollside()){
   addDate();//插入數據
  }else{
   clearInterval(time);
   window.onscroll=function(){
   if(checkscrollside()){
    addDate();
   };
   }
  }
  },1000) 
  
 } 
 // 數據插入
 function addDate(){
  var dataInt=['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg','6.jpg','7.jpg','8.jpg'];//模擬數據,也可以是對象
  var oParent = document.getElementById('content');
  for(var i=0;i<dataInt.length;i++){//循環插入數據 
  var oBox=document.createElement('div');
  oBox.className='box';
  oParent.appendChild(oBox);
  var oImg=document.createElement('img');
  oImg.src='./img/'+dataInt[i];
  oBox.appendChild(oImg);
  }
 }
 //獲取子class的數組
 function getClassObj(parentID,childClass){
  var oParent=document.getElementById(parentID);
  var allChildObj=oParent.getElementsByTagName('*');//獲取父級下的所有子集
  var childObj=[];//創建一個數組 用於收集子元素
  for (var i=0;i<allChildObj.length;i++) {//遍歷子元素、判斷類別、壓入數組
  if (allChildObj[i].className==childClass){
   childObj.push(allChildObj[i]);
  }
  };
  return childObj;
 }
 // 判斷滾動條是否到底部
 function checkscrollside(){
  var arrBox=getClassObj("content",'box');
  //獲取最後一個瀑布流塊的高度:距離網頁頂部(實現未滾到底就開始加載)
  var lastBoxH=arrBox[arrBox.length-1].offsetTop;
  var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//獲取滾動條卷走的高度
  var documentH=document.documentElement.clientHeight;//顯示頁面文檔的高
  return (lastBoxH<scrollTop+documentH)?true:false;//到達指定高度後 返回true,觸發waterfall()函數
 }
 </script>
</head>
<body>
 <div id="content">
 <div class="box"><img src="img/0.jpg" alt=""></div>
 <div class="box"><img src="img/1.jpg" alt=""></div>
 <div class="box"><img src="img/2.jpg" alt=""></div>
 <div class="box"><img src="img/3.jpg" alt=""></div>
 <div class="box"><img src="img/4.jpg" alt=""></div>
 <div class="box"><img src="img/5.jpg" alt=""></div>
 <div class="box"><img src="img/6.jpg" alt=""></div>
 <div class="box"><img src="img/7.jpg" alt=""></div>
 <div class="box"><img src="img/8.jpg" alt=""></div>
 <div class="box"><img src="img/9.jpg" alt=""></div>
 <div class="box"><img src="img/10.jpg" alt=""></div>
 </div>
</body>
</html>

注意點

1.滾動加載還是得另外加js 
2.加載的數據,是豎向排列的。體驗不是很友好 
3.有兼容性問題,Internet Explorer 10 +

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved