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


Posted in Javascript onJanuary 02, 2017

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

效果图如下

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
asp.net和asp下ACCESS的参数化查询
Jun 11 Javascript
js ondocumentready onmouseover onclick onmouseout 样式
Jul 22 Javascript
JQuery EasyUI 对话框的使用方法
Oct 24 Javascript
jquery iframe操作详细解析
Nov 20 Javascript
jQuery制作仿Mac Lion OS滚动条效果
Feb 10 Javascript
教你使用javascript简单写一个页面模板引擎
May 05 Javascript
利用Node.JS实现邮件发送功能
Oct 21 Javascript
基于javascript实现按圆形排列DIV元素(一)
Dec 02 Javascript
JS中的Replace()传入函数时的用法详解
Sep 11 Javascript
彻底搞懂JavaScript中的apply和call方法(必看)
Sep 18 Javascript
在 vue-cli v3.0 中使用 SCSS/SASS的方法
Jun 14 Javascript
js+h5 canvas实现图片验证码
Oct 11 Javascript
一个例子轻松学会Vue.js
Jan 02 #Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
Jan 01 #Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
Jan 01 #Javascript
JavaScript cookie详解及简单实例应用
Dec 31 #Javascript
深入理解Angularjs向指令传递数据双向绑定机制
Dec 31 #Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
Dec 31 #Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
Dec 31 #Javascript
You might like
php中http_build_query 的一个问题
2012/03/25 PHP
PHP命名空间简单用法示例
2018/12/28 PHP
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
2007/03/27 Javascript
List the UTC Time on a Computer
2007/06/11 Javascript
ext监听事件方法[初级篇]
2008/04/27 Javascript
用正则表达式替换图片地址img标签
2013/11/22 Javascript
js arguments,jcallee caller用法总结
2013/11/30 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
2014/09/03 Javascript
JS遍历数组及打印数组实例分析
2016/01/21 Javascript
Javascript基础_标记文字的实现方法
2016/06/14 Javascript
Vue.js中数组变动的检测详解
2016/10/12 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
2016/10/24 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
2017/09/14 Javascript
jQuery实现table表格checkbox全选的方法分析
2018/07/04 jQuery
微信小程序如何使用云开发
2019/05/17 Javascript
vue input标签通用指令校验的实现
2019/11/05 Javascript
Python实现的简单算术游戏实例
2015/05/26 Python
深入理解Python中变量赋值的问题
2017/01/12 Python
python基础教程之匿名函数lambda
2017/01/17 Python
python与sqlite3实现解密chrome cookie实例代码
2018/01/20 Python
Python实现PS图像明亮度调整效果示例
2018/01/23 Python
python实现冒泡排序算法的两种方法
2018/03/10 Python
TensorFlow实现保存训练模型为pd文件并恢复
2020/02/06 Python
python删除某个目录文件夹的方法
2020/05/26 Python
Python如何定义有默认参数的函数
2020/08/10 Python
利用HTML5画出一个坦克的形状具体实现代码
2013/06/20 HTML / CSS
C语言变量的命名规则都有哪些
2013/12/27 面试题
《窗前的气球》教学反思
2014/04/07 职场文书
体育教师求职信
2014/06/30 职场文书
出纳岗位职责
2015/01/31 职场文书
节约用电通知
2015/04/25 职场文书
行政复议决定书
2015/06/24 职场文书
四则混合运算教学反思
2016/02/23 职场文书
装修安全责任协议书
2016/03/22 职场文书
vue-cropper插件实现图片截取上传组件封装
2021/05/27 Vue.js
Python极值整数的边界探讨分析
2021/09/15 Python