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

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

 更新時間：2016年04月11日 08:54:09   作者：輝子t1  
這篇文章主要介紹了JavaScript實現(xiàn)圖片自動加載的瀑布流效果的相關(guān)資料,需要的朋友可以參考下

先給大家展示下效果圖：

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

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

　　　　<div class="box">
<div class="box_img">
<img src="Img/8.jpg">
</div>
</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里面又重新定位的。

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

　　HTML文件：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-">
<title></title>
<link rel="stylesheet" href="waterfall.css" type="text/css">
<script src="waterfall.js"></script>
</head>
<body>
<div id="content">
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box" >
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box" >
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box" >
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box" >
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box" >
<div class="box_img">
<img src="Img/.jpg">
</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)圖片自動加載的瀑布流效果代碼到此給大家介紹完了，希望對大家有所幫助！

相關(guān)文章

  • JS對文本框值的判斷示例

    JS對文本框值的判斷示例

    JS判斷只能是數(shù)字和小數(shù)點，下面為大家介紹下使用JS對文本框值的判斷,需要的朋友可以參考下
    2014-03-03
  • webapi根據(jù)id獲取元素的實現(xiàn)思路

    webapi根據(jù)id獲取元素的實現(xiàn)思路

    掌握document.getElementById() 根據(jù)id獲取元素,在頁面畫出一個寬200 高200 粉色的盒子, 在控制臺打印這個盒子,接到這樣的需求如何處理呢,下面小編給大家分享webapi根據(jù)id獲取元素的實現(xiàn)思路,感興趣的朋友一起看看吧
    2024-02-02
  • 微信小程序?qū)崿F(xiàn)的自定義分享功能示例

    微信小程序?qū)崿F(xiàn)的自定義分享功能示例

    這篇文章主要介紹了微信小程序?qū)崿F(xiàn)的自定義分享功能,結(jié)合實例形式分析了微信小程序自定義分享功能的原理與簡單實現(xiàn)技巧,需要的朋友可以參考下
    2019-02-02
  • JS常用加密編碼與算法實例總結(jié)

    JS常用加密編碼與算法實例總結(jié)

    這篇文章主要介紹了JS常用加密編碼與算法,結(jié)合實例形式總結(jié)分析了javascript常見的utf8、base64編碼及md5、md4、SHA1等算法實現(xiàn)方法,需要的朋友可以參考下
    2016-12-12
  • 淺談JavaScript構(gòu)造樹形結(jié)構(gòu)的一種高效算法

    淺談JavaScript構(gòu)造樹形結(jié)構(gòu)的一種高效算法

    這篇文章主要介紹了JavaScript構(gòu)造樹形結(jié)構(gòu)的一種高效算法，對算法感興趣的同學(xué)，可以參考下
    2021-05-05
  • 原生JavaScript實現(xiàn)滑動拖動驗證的示例代碼

    原生JavaScript實現(xiàn)滑動拖動驗證的示例代碼

    這篇文章主要介紹了原生JavaScript實現(xiàn)滑動拖動驗證的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-12-12
  • JS中可以改善代碼的5種重構(gòu)技術(shù)分享

    JS中可以改善代碼的5種重構(gòu)技術(shù)分享

    代碼重構(gòu)涉及在不改變其外部功能的情況下對現(xiàn)有代碼進行改進，這是編程的核心部分之一，所以下面我們將研究一些技巧，這些技巧可以幫助我們以更好的方式重構(gòu)代碼，希望對大家有所幫助
    2023-06-06
  • JS中的異常處理方法分享

    JS中的異常處理方法分享

    我們在編寫js過程中，難免會遇到一些代碼錯誤問題，需要找出來，有些時候怕因為js問題導(dǎo)致用戶體驗差，這里給出一些解決方法
    2013-12-12
  • JavaScript模板入門介紹

    JavaScript模板入門介紹

    我最開始寫過一個富交互的頁面，其中的JavaScript代碼包含了很多html標(biāo)簽
    2012-09-09
  • axios 處理 302 狀態(tài)碼的解決方法

    axios 處理 302 狀態(tài)碼的解決方法

    這篇文章主要介紹了axios 處理 302 狀態(tài)碼的解決方法,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
    2018-04-04

最新評論