欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

純js實(shí)現(xiàn)瀑布流布局及ajax動態(tài)新增數(shù)據(jù)

 更新時(shí)間:2016年04月07日 17:08:20   作者:WoodK  
這篇文章主要介紹了基于javascript實(shí)現(xiàn)瀑布流布局,及ajax動態(tài)新增數(shù)據(jù)的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

本文用純js代碼手寫一個(gè)瀑布流網(wǎng)頁效果,初步實(shí)現(xiàn)一個(gè)基本的瀑布流布局,以及滾動到底部后模擬ajax數(shù)據(jù)加載新圖片功能。

缺點(diǎn):

1. 程序不是響應(yīng)式,不能實(shí)時(shí)調(diào)整頁面寬度;

2. 程序中當(dāng)新增ajax模擬數(shù)據(jù)圖片后,是將整個(gè)頁面的所有圖片都重新定位一次。

3. 程序是等所有圖片加載完成后再讀取圖片的尺寸,實(shí)際中肯定不能這樣做。

4. 實(shí)際項(xiàng)目中,應(yīng)該由后臺程序給出圖片尺寸值,在js代碼中直接使用圖片的width屬性。 

本程序思路:

html結(jié)構(gòu):

<body>
 <div id="container">
  <div class="box">
   <div class="box_img">
    <img src="img/1.jpg" />
   </div>
  </div>
  <div class="box">
   <div class="box_img">
    <img src="img/2.jpg" />
   </div>
  </div>
  ...
 </div>
</body>

一、初始化布局

1. 設(shè)置#container為position:relative;

2. 設(shè)置.box為float:left;

3. 網(wǎng)頁加載后對所有圖片進(jìn)行定位;

  3.1 圖片寬度是固定的,計(jì)算出當(dāng)前頁面每行能容納的圖片數(shù)num,并得出#container的寬度,然后設(shè)置頁面居中;

  3.2 循環(huán)遍歷所有圖片,前num個(gè)圖片默認(rèn)float布局作為第一行,并存入數(shù)組BoxHeightArr = [];

  3.3 第一行布局完成后,排布下一個(gè)圖片,并更新BoxHeightArr[]:

    3.3.1 將下一個(gè)圖片放到第一行最矮圖片的下方(用position:absolute定位),也就是BoxHeightArr[]中高度最小的那一列,記錄下列數(shù)的索引值:minIndex;

    3.3.2 更新BoxHeightArr[]中最小的那個(gè)值(BoxHeightArr[minIndex]+當(dāng)前圖片的高度);

  3.4 重復(fù)循環(huán)3.3步驟,直到所有圖片都排布完成

二、實(shí)時(shí)監(jiān)測滾動高度,是否要加載新數(shù)據(jù)

1.初始化完成后得到最后一個(gè)圖片距離頂部的高度: lastContentHeight

2.用window.onscroll = function(){...}

  實(shí)時(shí)監(jiān)測當(dāng)前頁面的滾動高度為:scrollTop

  實(shí)時(shí)監(jiān)測當(dāng)前頁面視窗高度為:pageHeight

3. 當(dāng)頁面監(jiān)測到:lastContentHeight < scrollTop + pageHeight 時(shí),用ajax獲取新增圖片的json數(shù)據(jù)。

三、頁面底部新增內(nèi)容

1. 用一個(gè)循環(huán),先創(chuàng)建一個(gè)新的圖片容器,添加到底部,然后將json數(shù)據(jù)中相應(yīng)的圖片數(shù)據(jù)如路徑等信息寫入該容器完成添加圖片。

2. 所有新增圖片添加完成后,對整個(gè)頁面的所有圖片及布局重新執(zhí)行步驟一的初始化操作。

 項(xiàng)目文件夾:

index.html: 預(yù)先置入部分圖片數(shù)據(jù)

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <link rel="stylesheet" type="text/css" href="css/style.css"/>
 <script src="js/app.js"></script>
 <title>JavaScript瀑布流</title>
 </head>
 <body>
 <div id="container">
  <div class="box">
  <div class="box_img">
   <img src="img/1.jpg"/>
  </div>
  </div>
  <div class="box">
  <div class="box_img">
   <img src="img/2.jpg"/>
  </div>
  </div>
  <div class="box">
  <div class="box_img">
   <img src="img/3.jpg"/>
  </div>
  </div>
  <div class="box">
  <div class="box_img">
   <img src="img/4.jpg"/>
  </div>
  </div>
  <div class="box">
  <div class="box_img">
   <img src="img/5.jpg"/>
  </div>
  </div>
  <div class="box">
  <div class="box_img">
   <img src="img/6.jpg"/>
  </div>
  </div>
  <div class="box">
  <div class="box_img">
   <img src="img/7.jpg"/>
  </div>
  </div>
  <div class="box">
  <div class="box_img">
   <img src="img/8.jpg"/>
  </div>
  </div>
  <div class="box">
  <div class="box_img">
   <img src="img/9.jpg"/>
  </div>
  </div>
  <div class="box">
  <div class="box_img">
   <img src="img/10.jpg"/>
  </div>
  </div>
  
  <div class="box">
  <div class="box_img">
   <img src="img/1.jpg"/>
  </div>
  </div>
  <div class="box">
  <div class="box_img">
   <img src="img/2.jpg"/>
  </div>
  </div>
  <div class="box">
  <div class="box_img">
   <img src="img/3.jpg"/>
  </div>
  </div>
  <div class="box">
  <div class="box_img">
   <img src="img/4.jpg"/>
  </div>
  </div>
  <div class="box">
  <div class="box_img">
   <img src="img/5.jpg"/>
  </div>
  </div>
  <div class="box">
  <div class="box_img">
   <img src="img/6.jpg"/>
  </div>
  </div>
  <div class="box">
  <div class="box_img">
   <img src="img/7.jpg"/>
  </div>
  </div>
  <div class="box">
  <div class="box_img">
   <img src="img/8.jpg"/>
  </div>
  </div>
  <div class="box">
  <div class="box_img">
   <img src="img/9.jpg"/>
  </div>
  </div>
 
  <div class="box">
  <div class="box_img">
   <img src="img/10.jpg"/>
  </div>
  </div>
  
  <div class="box">
  <div class="box_img">
   <img src="img/1.jpg"/>
  </div>
  </div>
  <div class="box">
  <div class="box_img">
   <img src="img/2.jpg"/>
  </div>
  </div>
  <div class="box">
  <div class="box_img">
   <img src="img/3.jpg"/>
  </div>
  </div>
  <div class="box">
  <div class="box_img">
   <img src="img/4.jpg"/>
  </div>
  </div>
  <div class="box">
  <div class="box_img">
   <img src="img/5.jpg"/>
  </div>
  </div>
  <div class="box">
  <div class="box_img">
   <img src="img/6.jpg"/>
  </div>
  </div>
  <div class="box">
  <div class="box_img">
   <img src="img/7.jpg"/>
  </div>
  </div>
  <div class="box">
  <div class="box_img">
   <img src="img/8.jpg"/>
  </div>
  </div>
  <div class="box">
  <div class="box_img">
   <img src="img/9.jpg"/>
  </div>
  </div>
  <div class="box">
  <div class="box_img">
   <img src="img/9.jpg"/>
  </div>
  </div>
  <div class="box">
  <div class="box_img">
   <img src="img/10.jpg"/>
  </div>
  </div>
 </div>
 </body>
</html>

style.css:

*{
 margin: 0;
 padding: 0;
}
#container{
 position: relative;
}
.box{
 padding: 5px;
 float: left;
}
.box_img{
 padding: 5px;
 border: 1px solid #ccc;
 box-shadow: 0 0 5px #ccc;
 border-radius: 5px;
}
.box_img img{
 width: 150px;
 height: auto;
} 

app.js:

window.onload = function(){
 imgLocation("container", "box");
 //ajax模擬數(shù)據(jù)
 var imgData = {"data":[{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"8.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"8.jpg"}]}
 
 window.onscroll = function(){
 if(checkFlag()){ //判斷是否到底部要加載新的數(shù)據(jù)
  var cparent = document.getElementById("container");
  //把a(bǔ)jax數(shù)據(jù)加載進(jìn)頁面
  for(var i=0; i<imgData.data.length; i++){
  var ccontent = document.createElement("div");
  ccontent.className="box";
  cparent.appendChild(ccontent);
  var boximg = document.createElement("div");
  boximg.className = "box_img";
  ccontent.appendChild(boximg);
  var img = document.createElement("img");
  img.src = "img/"+imgData.data[i].src;
  boximg.appendChild(img);
  }
  //把所有圖片數(shù)據(jù)重新定位一次
  imgLocation("container", "box");
 }
 }
};

function checkFlag(){
 var cparent = document.getElementById("container");
 var ccontent = getChildElement(cparent, "box");
 
 //得到最后一張圖距頂部的高度,滾動高度,窗口高度
 var lastContentHeight = ccontent[ccontent.length-1].offsetTop;
 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
 var pageHeight = document.documentElement.clientHeight || document.body.clientHeight;
 console.log(lastContentHeight+":"+scrollTop+":"+pageHeight);
 
 if(lastContentHeight < scrollTop + pageHeight){
 return true;
 }
}

function imgLocation(parent, content){
 //將parent下所有的content全部取出
 var cparent = document.getElementById(parent);
 var ccontent = getChildElement(cparent, content);
 //根據(jù)當(dāng)前瀏覽器窗口的寬度,確定每行圖片數(shù)并固定,居中
 var imgWidth = ccontent[0].offsetWidth; //offsetWidth = width + padding + border
 var num = Math.floor(document.documentElement.clientWidth / imgWidth);
 cparent.style.cssText = "width:"+imgWidth*num+"px;margin:0 auto";
 //alert("pause");
 //設(shè)置一個(gè)數(shù)組,用來承載第一行的圖片信息
 var BoxHeightArr = [];
 for(var i=0; i<ccontent.length; i++){
 if(i<num){
  //第一行的圖片的高度記錄下來
  BoxHeightArr[i] = ccontent[i].offsetHeight;
  //當(dāng)ajax數(shù)據(jù)加載后,程序是將所有圖片重新定位,所以第一行的圖片要清除position:absolute
  ccontent[i].style.position = "static";
 }else{
  var minHeight = Math.min.apply(null, BoxHeightArr);
  var minIndex = getminheightLocation(BoxHeightArr, minHeight);
  
  //把圖放在第一行圖索引值最小的下面
  ccontent[i].style.position = "absolute";
  ccontent[i].style.top = minHeight+"px";
  ccontent[i].style.left = ccontent[minIndex].offsetLeft+"px";
  
  //圖片放好位置后更新“第一行圖片信息的最小高度”,
  //然后利用for循環(huán)重復(fù)這個(gè)動作到結(jié)束
  BoxHeightArr[minIndex] = BoxHeightArr[minIndex] + ccontent[i].offsetHeight;
 }
 }
;}

//獲取第一行圖片高度最小的索引值
function getminheightLocation(BoxHeightArr, minHeight){
 for(var i in BoxHeightArr){
 if(BoxHeightArr[i] == minHeight){
  return i;
 }
 }
}

//獲取所有box
function getChildElement(parent, content){
 contentArr = parent.getElementsByClassName(content);
 return contentArr;
}

效果圖:

以上就是本文的全部內(nèi)容,希望對大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。

相關(guān)文章

  • layer.confirm取消按鈕綁定事件的方法

    layer.confirm取消按鈕綁定事件的方法

    今天小編就為大家分享一篇layer.confirm取消按鈕綁定事件的方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • javascript獲取div的內(nèi)容 精華篇

    javascript獲取div的內(nèi)容 精華篇

    用js獲取div的內(nèi)容的方法,其實(shí)原理就是利用innerText或innerHTML
    2009-05-05
  • JS 實(shí)現(xiàn)導(dǎo)航欄懸停效果

    JS 實(shí)現(xiàn)導(dǎo)航欄懸停效果

    使用js實(shí)現(xiàn)的導(dǎo)航欄懸停效果在IE上,滾動滾動條或者鼠標(biāo)滾輪的時(shí)候,導(dǎo)航欄會抖動;而在Chrome和FF上有沒有任何問題
    2013-09-09
  • JavaScript實(shí)現(xiàn)帶緩沖效果的隨屏滾動漂浮廣告代碼

    JavaScript實(shí)現(xiàn)帶緩沖效果的隨屏滾動漂浮廣告代碼

    這篇文章主要介紹了JavaScript實(shí)現(xiàn)帶緩沖效果的隨屏滾動漂浮廣告代碼,通過JavaScript結(jié)合時(shí)間函數(shù)動態(tài)響應(yīng)頁面元素滾動事件實(shí)現(xiàn)懸浮廣告的緩沖漂浮效果,非常簡單實(shí)用,需要的朋友可以參考下
    2015-11-11
  • js仿百度登錄頁實(shí)現(xiàn)拖動窗口效果

    js仿百度登錄頁實(shí)現(xiàn)拖動窗口效果

    這篇文章主要為大家詳細(xì)介紹了js仿百度登錄頁實(shí)現(xiàn)拖動窗口效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-03-03
  • 微信小程序上線發(fā)布流程圖文詳解

    微信小程序上線發(fā)布流程圖文詳解

    這篇文章主要介紹了微信小程序上線發(fā)布流程,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-05-05
  • JS比較2個(gè)日期間隔的示例代碼

    JS比較2個(gè)日期間隔的示例代碼

    這篇文章主要介紹了JS比較2個(gè)日期間隔的方法,需要的朋友可以參考下
    2014-04-04
  • js模擬支付寶密碼輸入框

    js模擬支付寶密碼輸入框

    這篇文章主要為大家詳細(xì)介紹了js模擬支付寶密碼輸入框效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-04-04
  • js 單引號 傳遞方法

    js 單引號 傳遞方法

    當(dāng)從bean中取出的值是單引號時(shí),加載頁面就會報(bào)js錯??梢允褂孟旅娴姆椒ń鉀Q。
    2009-06-06
  • JS監(jiān)聽變量改變的實(shí)現(xiàn)

    JS監(jiān)聽變量改變的實(shí)現(xiàn)

    本文主要介紹了JS監(jiān)聽變量改變的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-04-04

最新評論