JavaScript實(shí)現(xiàn)圖片自動(dòng)加載的瀑布流效果

當(dāng)前位置：首頁 > 范文|應(yīng)用文 > IT技術(shù)專欄 > 網(wǎng)絡(luò)編程

來源：易賢網(wǎng) 閱讀：1064 次日期：2016-07-08 13:56:03

溫馨提示：易賢網(wǎng)小編為您整理了“JavaScript實(shí)現(xiàn)圖片自動(dòng)加載的瀑布流效果”,方便廣大網(wǎng)友查閱！

這篇文章主要介紹了JavaScript實(shí)現(xiàn)圖片自動(dòng)加載的瀑布流效果的相關(guān)資料,需要的朋友可以參考下

先給大家展示下效果圖：

向下滑動(dòng)網(wǎng)頁的時(shí)候能夠自動(dòng)加載圖片并顯示。

盛放圖片的盒子模型如下：

</div>

設(shè)置img-width為150px，然后box_img添加內(nèi)邊距和陰影效果，box的外邊距為0，添加內(nèi)邊距。盒子的寬度是由img-width和邊距撐開的。也就是說盒子之間是沒有間距的，但是盒子內(nèi)部有一些邊距的效果。這樣在js設(shè)置位置的時(shí)候就不用考慮邊距問題，直接調(diào)用box的寬度就可以了。

設(shè)置盛放所有box的div的position為relative，這樣在設(shè)置top值或是left值的時(shí)候，就不用考慮最外層的margin屬性。

放置圖片的位置：獲得第一行圖片的高度并且存放在數(shù)組里面，接下來的圖片設(shè)置position為absolute，放置在高度最小的圖片的下面，然后設(shè)置top和left，并且把數(shù)組的最小值加上新放置的圖片的高度。也就是說HTML里面原始放置的圖片除了第一行以外，其他的圖片都是在js里面又重新定位的。

當(dāng)滑動(dòng)頁面到底部的時(shí)候觸發(fā)事件函數(shù)，緊接著放置一些圖片，這樣保證圖片的無限加載。

HTML文件：

<!DOCTYPE html>

<html>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

CSS文件：

margin: ;

padding:;

}

#content{

position: relative;

background-color: #;

}

.box{

padding: px;

float: left;

}

.box_img{

padding: px;

border: px solid #cccccc;

box-shadow: px #cccccc;

border-radius: px;

}

img{

width: px;

height: auto;

}

js文件：

Math.floor()函數(shù)能夠向下取整。

Math.min.apply(null,heightArr);函數(shù)能獲得heightArr數(shù)組的最小值。

window.onscroll=function(){}；滑動(dòng)頁面的時(shí)候觸發(fā)這個(gè)函數(shù)。

document.documentElement.clientHeight；瀏覽器顯示出來的高度。

document.documentElement.scrollTop；滑動(dòng)的距離。

/**

* Created by asua on 2016/4/9.

window.onload=function(){

imgLocation("content","box");

var lodeImage={"Date":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src":"10.jpg"},]}

window.onscroll=function(){

if(checkFlag()){

for(var i=0;i<lodeImage.Date.length;i++){

var box=document.createElement("div");

box.className="box";

var cparent=document.getElementById("content");

cparent.appendChild(box);

var box_img=document.createElement("div");

box_img.className="box_img";

box.appendChild(box_img);

var img=document.createElement("img");

img.src="Img/"+lodeImage.Date[i].src;

box_img.appendChild(img);

}

imgLocation("content","box");

}

function checkFlag(){

var cparent=document.getElementById("content");

var ccontent=getChildElement(cparent,"box");

var lastContentHeight=ccontent[ccontent.length-1].offsetTop;

var scrollHeight=document.documentElement.scrollTop||document.body.scrollTop;

var pageHeight=document.documentElement.clientHeight||document.body.clientHeight;

console.log(lastContentHeight+":"+scrollHeight+":"+pageHeight);

if(lastContentHeight<scrollHeight+pageHeight){

return true;

}

function imgLocation(parent,child){

var cparent=document.getElementById(parent);

var ccontent=getChildElement(cparent,child);

var imgwidth=ccontent[0].offsetWidth;

var cols=Math.floor(document.documentElement.clientWidth/imgwidth);

cparent.style.cssText="width:"+imgwidth*cols+"px;margin:30px auto";

var heightArr=[];

for(var i=0;i<ccontent.length;i++){

if(i<cols){

heightArr.push(ccontent[i].offsetHeight);

}else{

var minHeight=Math.min.apply(null,heightArr);

var minIndex=getMinIndex(heightArr,minHeight);

ccontent[i].style.position="absolute";

ccontent[i].style.top=minHeight+"px";

ccontent[i].style.left=ccontent[minIndex].offsetLeft+"px";

heightArr[minIndex]+=ccontent[i].offsetHeight;

}

function getMinIndex(heightArr,minHeight){

for(var i=0;i<heightArr.length;i++){

if(heightArr[i]==minHeight){

return i;

}

function getChildElement(parent,content){

var contentArr=[];

var allcontent=parent.getElementsByTagName("*");

for(var i=0;i<allcontent.length;i++){

if(allcontent[i].className==content){

contentArr.push(allcontent[i]);

}

return contentArr;

}

好了，關(guān)于js實(shí)現(xiàn)圖片自動(dòng)加載的瀑布流效果代碼到此給大家介紹完了，希望對大家有所幫助！

更多信息請查看網(wǎng)絡(luò)編程

上一篇：詳解JavaScript的另類寫法

下一篇：javascript冒泡排序小結(jié)

易賢網(wǎng)手機(jī)網(wǎng)站地址：JavaScript實(shí)現(xiàn)圖片自動(dòng)加載的瀑布流效果

由于各方面情況的不斷調(diào)整與變化，易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考，敬請考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇?zhǔn)！

相關(guān)閱讀網(wǎng)絡(luò)編程

Shell中如何刪除文本比較長的行的實(shí)現(xiàn)方法10月30日

vue.js語法及常用指令10月30日

python 讀寫中文json的實(shí)例詳解10月30日

Objective-C Json 實(shí)例詳解10月30日

bootstrap table sum總數(shù)量統(tǒng)計(jì)實(shí)現(xiàn)方法10月30日

python生成二維碼的實(shí)例詳解10月30日

Python批量更改文件名的實(shí)現(xiàn)方法10月30日

解決出現(xiàn)Incorrect integer value的問題10月30日

jQuery實(shí)現(xiàn)切換隱藏與顯示同時(shí)切換圖標(biāo)功能10月30日

docker python api 安裝配置的詳解10月30日

javascript按鈕禁用和啟用的效果實(shí)例代碼10月30日

vue.js todolist實(shí)現(xiàn)代碼10月30日

vue.js 父向子組件傳參的實(shí)例代碼10月30日

apache 開啟重定向 rewrite的實(shí)現(xiàn)方法10月30日

Vue.js劃分組件的方法10月30日

python logging日志模塊的詳解10月30日

vue中的scope使用詳解10月30日

docker cgroup 資源監(jiān)控的詳解10月30日

使用Android Studio 開發(fā)自己的SDK教程10月23日

linux系統(tǒng)下MongoDB單節(jié)點(diǎn)安裝教程10月23日

易賢網(wǎng)移動(dòng)網(wǎng)站

2026上岸·考公考編培訓(xùn)報(bào)班

報(bào)班類型
姓名
手機(jī)號
驗(yàn)證碼

茄子在线看片免费人成视频,午夜福利精品a在线观看,国产高清自产拍在线观看,久久综合久久狠狠综合