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 相关文章推荐
如何使用jQuery来处理图片坏链具体实现步骤
May 02 Javascript
jquery动态添加删除div 具体实现
Jul 20 Javascript
javascript实现window.print()去除页眉页脚
Dec 30 Javascript
jquery获取checkbox的值并post提交
Jan 14 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
Jan 21 Javascript
用NODE.JS中的流编写工具是要注意的事项
Mar 01 Javascript
VueJs与ReactJS和AngularJS的异同点
Dec 12 Javascript
JS中cookie的使用及缺点讲解
May 13 Javascript
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
基于复选框demo(分享)
Sep 27 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
Aug 23 Javascript
微信小程序后端实现授权登录
Feb 24 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备份数据库生成SQL文件并下载的函数代码
2012/02/05 PHP
浅析PHP的ASCII码转换类
2013/07/05 PHP
PHP中file_get_contents高?用法实例
2014/09/24 PHP
PHP动态输出JavaScript代码实例
2015/02/12 PHP
php中实现用数组妩媚地生成要执行的sql语句
2015/07/10 PHP
Yii2 RESTful中api的使用及开发实例详解
2016/07/06 PHP
NodeJS框架Express的模板视图机制分析
2011/07/19 NodeJs
JavaScript中的函数的两种定义方式和函数变量赋值
2014/05/12 Javascript
jQuery文件上传插件Uploadify使用指南
2014/06/05 Javascript
jQuery实现冻结表头的方法
2015/03/09 Javascript
JavaScript中的DSL元编程介绍
2015/03/15 Javascript
javascript实现自动输出文本(打字特效)
2015/08/27 Javascript
js密码强度校验
2015/11/10 Javascript
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
2017/04/04 jQuery
JS利用正则表达式实现简单的密码强弱判断实例
2017/06/16 Javascript
Angular4开发解决跨域问题详解
2017/08/28 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
2018/04/25 Javascript
JS非行间样式获取函数的实例代码
2018/06/05 Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
2019/09/20 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
2020/07/24 Javascript
Python求一批字符串的最长公共前缀算法示例
2019/03/02 Python
50行Python代码获取高考志愿信息的实现方法
2019/07/23 Python
基于python3监控服务器状态进行邮件报警
2019/10/19 Python
python实现引用其他路径包里面的模块
2020/03/09 Python
详解css3 mask遮罩实现一些特效
2018/10/24 HTML / CSS
HTML5中实现拖放效果无须借助javascript
2012/12/26 HTML / CSS
解锁canvas导出图片跨域的N种姿势小结
2019/01/24 HTML / CSS
NFL加拿大官方网上商店:NHLShop.ca
2019/03/12 全球购物
Groupon法国官方网站:特卖和网上购物高达-70%
2019/09/02 全球购物
J2SDK1.5与J2SDK5.0有什么区别
2012/09/19 面试题
高二美术教学反思
2014/01/14 职场文书
《一本男孩子必读的书》教学反思
2014/02/19 职场文书
资助贫困学生倡议书
2014/05/16 职场文书
采购部长岗位职责
2014/06/13 职场文书
刑事辩护词范文
2015/05/21 职场文书
Python 批量下载阴阳师网站壁纸
2021/05/19 Python