快捷導(dǎo)航

JavaScript實(shí)現(xiàn)圖片瀑布流和底部刷新

更新時(shí)間：2017年01月02日 12:51:14 作者：饑渴計(jì)科極客杰鏗

這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)圖片瀑布流和底部刷新，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

瀑布流現(xiàn)在基本上是圖片顯示網(wǎng)頁(yè)的標(biāo)配，主要是為了適配圖片和文字塊的大小，使顯示出的效果沒(méi)有那么呆板
實(shí)現(xiàn)這個(gè)功能首先要有html，css和js基礎(chǔ)

首先先實(shí)現(xiàn)瀑布流

即下一行的圖片放在上一行的凹下去的地方

基本的html代碼如下

<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>瀑布流</title>
 <link rel="stylesheet" type="text/css" href="css/style.css">
 <!--script不能用<script/>-->
 <script src="js/app1.js"></script>
</head>
<body>
<div id="container">
 <div class="box">
  <div class="img_box">
   <img src="images/1.jpg">
  </div>
 </div>
 <div class="box">
  <div class="img_box">
   <img src="images/2.jpg">
  </div>
 </div>
 <div class="box">
  <div class="img_box">
   <img src="images/3.jpg">
  </div>
 </div>
 <div class="box">
  <div class="img_box">
   <img src="images/4.jpg">
  </div>
 </div>
 <div class="box">
  <div class="img_box">
   <img src="images/5.jpg">
  </div>
 </div>
 <div class="box">
  <div class="img_box">
   <img src="images/6.jpg">
  </div>
 </div>
 <div class="box">
  <div class="img_box">
   <img src="images/1.jpg">
  </div>
 </div>
 <div class="box">
  <div class="img_box">
   <img src="images/2.jpg">
  </div>
 </div>
 <div class="box">
  <div class="img_box">
   <img src="images/3.jpg">
  </div>
 </div>
 <div class="box">
  <div class="img_box">
   <img src="images/4.jpg">
  </div>
 </div>
 <div class="box">
  <div class="img_box">
   <img src="images/5.jpg">
  </div>
 </div>
</div>
</body>
</html>

然后再寫(xiě)一下css

*{
 margin: 0px;
 padding: 0px;
}
/*container為相對(duì)布局*/
#container{
 position:relative;
}
/*box向左浮動(dòng)*/
.box{
 padding:5px;
 float: left;
}
/*加一些邊框*/
.img_box{
 padding: 5px;
 border:1px solid #ccc;
 box-shadow:0 0 5px #ccc;
 border-radius: 5px;
}
/*寬度固定，高度自適應(yīng)，使圖片不變形*/
.img_box img{
 width: 150px;
 height: auto;
}

接下來(lái)就是這次的核心，寫(xiě)js

//開(kāi)始加載要執(zhí)行的方法
window.onload=function(){
 imgLocation("container","box")
}
function imgLocation(parent,content){
 var cparent=document.getElementById(parent);
 var ccontent=getChildElement(cparent,content)
 //圖片寬度
 var imgWidth=ccontent[0].offsetWidth;
 //每一行圖片個(gè)數(shù)
 var cols= Math.floor(document.documentElement.clientWidth/imgWidth);
 //使寬度一定，內(nèi)容居中
 cparent.style.cssText="width:"+imgWidth *cols+"px;margin:0 auto";

 var BoxHeightArr=[];
 for(var i=0;i<ccontent.length;i++){
  //獲取第一行圖片的高度
  if (i<cols){
   BoxHeightArr[i]=ccontent[i].offsetHeight;
  }else {
   //Math.min對(duì)數(shù)組要加上apply
   var minheight=Math.min.apply(null,BoxHeightArr);
   var minIndex=getminheightLocation(BoxHeightArr,minheight)
   //設(shè)為絕對(duì)布局使內(nèi)容不隨屏幕大小改變
   ccontent[i].style.position="absolute";
   ccontent[i].style.top=minheight+"px";
   ccontent[i].style.left=ccontent[minIndex].offsetLeft+"px";
   //該列的高度加上后添加進(jìn)去圖片高度
   BoxHeightArr[minIndex]=BoxHeightArr[minIndex]+ccontent[i].offsetHeight

  }
 }
}
//獲取最小高度的位置
function getminheightLocation(BoxHeightArr,minHeight){
 for(var i in BoxHeightArr){
  if (BoxHeightArr[i]==minHeight){
   return i;
  }
 }
}
function getChildElement(parent,content){
 var contentArr=[];
 //獲取所有子Element
 var allcontent=parent.getElementsByTagName("*")
 for(var i=0;i<allcontent.length;i++){
  //如果className是box就添加進(jìn)去
  if (allcontent[i].className==content){
   contentArr.push(allcontent[i]);
  }
 }
 return contentArr
}

這樣就簡(jiǎn)單實(shí)現(xiàn)了瀑布流效果

接下來(lái)是下拉到底部自動(dòng)刷新

主要是在滾動(dòng)時(shí)監(jiān)聽(tīng)是否到底部，到達(dá)差不多底部的位置就加載

添加以下代碼即可

window.onscroll=function(){
 //模擬數(shù)據(jù)
 var imgData={"data":[{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"}]}
 if (checkFlag()){
  var cparent=document.getElementById("container");
  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="img_box";
   ccontent.appendChild(boximg);
   var img=document.createElement("img");
   img.src="images/"+imgData.data[i].src;
   boximg.appendChild(img);
  }
  //按照之前規(guī)則排列
  imgLocation("container","box")
 }
}
function checkFlag(){
 var cparent=document.getElementById("container");
 var ccontent=getChildElement(cparent,"box");
 //最后一張圖片距離頂部距離
 var lastContentHeight=ccontent[ccontent.length-1].offsetTop;
 //當(dāng)前距離
 var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
 //該頁(yè)面顯示的高度
 var pageHeight=document.documentElement.clientHeight||document.body.clientHeight;
 //如果差不多到達(dá)底部則返回true
 if (lastContentHeight<scrollTop+pageHeight){
  return true;
 }
}

效果圖如下