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 相关文章推荐
Mootools 1.2教程 Tooltips
Sep 15 Javascript
js将long日期格式转换为标准日期格式实现思路
Apr 07 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
Aug 26 Javascript
JS实现IE状态栏文字缩放效果代码
Oct 24 Javascript
学习JavaScript设计模式之责任链模式
Jan 18 Javascript
深入理解bootstrap框架之第二章整体架构
Oct 09 Javascript
JavaScript中的call和apply的用途以及区别
Jan 11 Javascript
jQuery实现鼠标经过显示动画边框特效
Mar 24 jQuery
mui上拉加载功能实例详解
Apr 13 Javascript
纯JS实现只能输入数字的简单代码
Jun 21 Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
Jul 18 Javascript
js对象数组和对象的使用实例详解
Aug 27 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 mb_convert_encoding 获取字符串编码类型实现代码
2009/04/26 PHP
PHP @ at 记号的作用示例介绍
2014/10/10 PHP
php实现图片等比例缩放代码
2015/07/23 PHP
浅谈PHP中的
2016/04/23 PHP
php格式化json函数示例代码
2016/05/12 PHP
PHP生成短网址方法汇总
2016/07/12 PHP
php使用Swoole实现毫秒级定时任务的方法
2020/09/04 PHP
JavaScript中的稀疏数组与密集数组[译]
2012/09/17 Javascript
jQuery 关于伪类选择符的使用说明
2013/04/24 Javascript
JS操作iframe里的dom(实例讲解)
2014/01/29 Javascript
javascript随机抽取0-100之间不重复的10个数
2016/02/25 Javascript
JavaScript制作颜色反转小游戏
2016/09/25 Javascript
js+css3制作时钟特效
2016/10/16 Javascript
angular+bootstrap的双向数据绑定实例
2017/03/03 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
2017/04/04 Javascript
微信小程序表单弹窗实例
2018/07/19 Javascript
JS变量提升及函数提升实例解析
2020/09/03 Javascript
vue+element_ui上传文件,并传递额外参数操作
2020/12/05 Vue.js
tornado捕获和处理404错误的方法
2014/02/26 Python
python中使用smtplib和email模块发送邮件实例
2014/04/22 Python
Python实现复杂对象转JSON的方法示例
2017/06/22 Python
你眼中的Python大牛 应该都有这份书单
2017/10/31 Python
python 删除指定时间间隔之前的文件实例
2018/04/24 Python
通过shell+python实现企业微信预警
2019/03/07 Python
基于Python中Remove函数的用法讨论
2020/12/11 Python
ziaja齐叶雅官方海外旗舰店:来自波兰的天然护肤品牌
2017/01/02 全球购物
党的群众路线教育实践活动批评与自我批评
2014/02/16 职场文书
新学期决心书
2014/03/11 职场文书
美食节目策划方案
2014/05/31 职场文书
学校火灾防控方案
2014/06/09 职场文书
2014第二批党的群众路线教育实践活动对照检查材料思想汇报
2014/09/18 职场文书
干部职工纪律作风整改措施思想汇报
2014/10/11 职场文书
英雄儿女观后感
2015/06/09 职场文书
2016年党课培训学习心得体会
2016/01/07 职场文书
对Golang中的FORM相关字段理解
2021/05/02 Golang
maven 解包依赖项中的文件的解决方法
2022/07/15 Java/Android