JavaScript實現圖片瀑布流和底部刷新

2019-11-19 18:10:38

字體：大中小

來源：轉載

供稿：網友

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

首先先實現瀑布流

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

基本的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

//開始加載要執行的方法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; //每一行圖片個數 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對數組要加上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}

這樣就簡單實現了瀑布流效果

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

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

添加以下代碼即可

window.onscroll=function(){ //模擬數據 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);  }  //按照之前規則排列  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; }}

效果圖如下