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

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

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

瀑布流現(xiàn)在基本上是圖片顯示網頁的標配，主要是為了適配圖片和文字塊的大小，使顯示出的效果沒有那么呆板
實現(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);
 //使寬度一定，內容居中
 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)
   //設為絕對布局使內容不隨屏幕大小改變
   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;
 }
}

效果圖如下

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

微信小程序實現(xiàn)走馬燈式抽獎
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)走馬燈式抽獎，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04
js類的靜態(tài)屬性和實例屬性的理解
看到論壇的帖子，然后對靜態(tài)屬性和實例屬性有個新的認識，做下記錄。
2009-10-10
js使用swiper實現(xiàn)層疊輪播效果實例代碼
這篇文章主要給大家介紹了關于js使用swiper實現(xiàn)層疊輪播效果的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2018-12-12
JavaScript forEach中return失效問題解決方案
這篇文章主要介紹了JavaScript forEach中return失效問題解決方案,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-06-06
Uniapp微信小程序實現(xiàn)全局事件監(jiān)聽并進行數(shù)據(jù)埋點的方法
niapp起源?uni-app是一個使用Vue.js開發(fā)所有前端應用的框架,下面這篇文章主要給大家介紹了關于Uniapp微信小程序實現(xiàn)全局事件監(jiān)聽并進行數(shù)據(jù)埋點的相關資料,需要的朋友可以參考下
2022-11-11
JavaScript必知必會(五) eval 的使用
這篇文章主要介紹了JavaScript必知必會(五) eval 的使用的相關資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下
2016-06-06
js簡單實現(xiàn)自動生成表格功能示例
這篇文章主要介紹了js簡單實現(xiàn)自動生成表格功能,結合實例形式分析了JavaScript針對數(shù)組元素遍歷與頁面元素動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下
2020-06-06
Javascript 去除數(shù)組的重復元素
在js中，如何去除指定數(shù)組中的重復元素？
2010-05-05
基于JavaScript實現(xiàn)添加到購物車效果附源碼下載
這篇文章主要介紹了基于JavaScript實現(xiàn)添加到購物車效果附源碼下載的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-08-08
js正則test匹配的踩坑及解決
這篇文章主要為大家介紹了正則test匹配的踩坑示例講解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-07-07