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

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

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

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

首先先實現(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>

然后再寫一下css

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

接下來就是這次的核心，寫js

//開始加載要執(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;
 //每一行圖片個數(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對數(shù)組要加上apply
   var minheight=Math.min.apply(null,BoxHeightArr);
   var minIndex=getminheightLocation(BoxHeightArr,minheight)
   //設為絕對布局使內(nèi)容不隨屏幕大小改變
   ccontent[i].style.position="absolute";
   ccontent[i].style.top=minheight+"px";
   ccontent[i].style.left=ccontent[minIndex].offsetLeft+"px";
   //該列的高度加上后添加進去圖片高度
   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就添加進去
  if (allcontent[i].className==content){
   contentArr.push(allcontent[i]);
  }
 }
 return contentArr
}

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

接下來是下拉到底部自動刷新

主要是在滾動時監(jiān)聽是否到底部，到達差不多底部的位置就加載

添加以下代碼即可

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;
 //當前距離
 var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
 //該頁面顯示的高度
 var pageHeight=document.documentElement.clientHeight||document.body.clientHeight;
 //如果差不多到達底部則返回true
 if (lastContentHeight<scrollTop+pageHeight){
  return true;
 }
}

效果圖如下