JavaScript实现图片瀑布流和底部刷新

瀑布流现在基本上是图片显示网页的标配，主要是为了适配图片和文字块的大小，使显示出的效果没有那么呆板
实现这个功能首先要有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;
 }
}

效果图如下

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# js # 瀑布流 # 底部刷新 # javascript实现瀑布流动态加载图片原理 # 瀑布流的实现方式（原生js+jquery+css3） # 纯js实现瀑布流布局及ajax动态新增数据 # 解析javascript瀑布流原理实现图片滚动加载 # javascript瀑布流式图片懒加载实例解析与优化 # javascript瀑布流式图片懒加载实例 # javascript实现瀑布流加载图片原理 # 详解javascript实现瀑布流列式布局 # 详解javascript实现瀑布流绝对式布局 # js实现瀑布流的三种方式比较 # 加载 # 是在 # 放在 # 要有 # 设为 # 不能用 # 拉到 # 大家多多 # 标配 # 自适应 # 再写 # 是为了 # 实现了 # 不变形 # 配图 # container # id # img # images # box

返回目录在线咨询

上一篇：HostEase是否提供免费的SSL证书？如何安装？
下一篇：c#入门教程零基础如何学习c#

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

JavaScript实现图片瀑布流和底部刷新

您的项目需求