在线观看小黄片视频日韩无码黄 ,国产高清无码一区,亚洲欧美制服另类国产无毒

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

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

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

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

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

先給大家展示下效果圖：

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

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

</div>

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

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

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

當滑動頁面到底部的時候觸發(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(){}；滑動頁面的時候觸發(fā)這個函數(shù)。

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

document.documentElement.scrollTop；滑動的距離。

/**

* 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實現(xiàn)圖片自動加載的瀑布流效果代碼到此給大家介紹完了，希望對大家有所幫助！

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

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

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

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

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

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

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

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

python 讀寫中文json的實例詳解10月30日

Objective-C Json 實例詳解10月30日

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

python生成二維碼的實例詳解10月30日

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

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

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

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

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

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

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

apache 開啟重定向 rewrite的實現(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é)點安裝教程10月23日

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

2025國考·省考課程試聽報名

報班類型
姓名
手機號
驗證碼