使用JS实现图片展示瀑布流效果(简单实例)


Posted in Javascript onSeptember 06, 2016

不知大家有没有发现,一般的图片展示网站都会使用瀑布流效果,所谓的瀑布流

就是网站内的图片不会一下子全缓存出来,而是等你滚动到一定的距离的时候,

下面的图片才会继续缓存,并且图片也是随机出现的,只是宽度一样,高度并不

一样,高高低低就像瀑布一样,所以叫做瀑布流效果。下面我把代码给大家,大家

随便下几张图片试试。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>瀑布流不重复</title>
  <style>
  *{margin: 0px;padding: 0px;list-style: none;}
  #box{width: 1000px;margin: 0 auto;}
  #box ul{float: left;width: 200px;margin-right: 50px;}
  #box img{width: 200px;}
  </style>
</head>
<body>
  <div id="box">
    <ul></ul>
    <ul></ul>
    <ul></ul>
    <ul></ul>
  </div>
  <script>
    var box=document.getElementById('box');
    var ul=box.children;
    function insert(){
      var x=0;
      var srcNum=Math.floor(Math.random()*35);//35是35张图片,可改成任意数,我这里总共是35张图片。
      var newli=document.createElement('li');
      newli.innerHTML='<img src="images/'+srcNum+'.png" alt="">';//这是图片的文件名,要求是统一。
      var minH=Math.min(ul[0].clientHeight,ul[1].clientHeight,ul[2].clientHeight,ul[3].clientHeight);
      for (var i = 0; i < ul.length; i++) {
        if (ul[i].clientHeight==minH) {
          x=i;
          break;
        }
      }
      ul[x].appendChild(newli);
   }
   for (var i = 0; i < 20; i++) {
     insert();
   }
   document.onscroll=function(){
     var viewH=document.body.clientHeight||document.documentElement.clientHeight;
     var winH=document.documentElement.scrollHeight;
     var scrollT=document.body.scrollTop||document.documentElement.scrollTop;
     if (winH-scrollT-viewH<500) {
       for (var i = 0; i < 20; i++) {
       insert();
     }
    }
   }
  </script>
</body>
</html>

以上这篇使用JS实现图片展示瀑布流效果(简单实例)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 打开窗口返回值实现代码
Mar 04 Javascript
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
Jan 12 Javascript
js 编程笔记 无名函数
Jun 28 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
May 07 Javascript
jquery 获取select数组与name数组长度的实现代码
Jun 20 Javascript
JS排序之冒泡排序详解
Apr 08 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
Jun 12 Javascript
详解JS数组Reduce()方法详解及高级技巧
Aug 18 Javascript
Angular6封装http请求的步骤详解
Aug 13 Javascript
深入理解JS异步编程-Promise
Jun 03 Javascript
使用layer模态框给新页面传值的方法
Sep 27 Javascript
js面向对象编程OOP及函数式编程FP区别
Jul 07 Javascript
ion content 滚动到底部会遮住一部分视图的快速解决方法
Sep 06 #Javascript
原生JS:Date对象全面解析
Sep 06 #Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
Sep 06 #Javascript
Vue.js每天必学之过渡与动画
Sep 06 #Javascript
Vue.js 父子组件通讯开发实例
Sep 06 #Javascript
Vuejs第十篇之vuejs父子组件通信
Sep 06 #Javascript
Vue.js每天必学之方法与事件处理器
Sep 06 #Javascript
You might like
简单的页面缓冲技术
2006/10/09 PHP
IIS6+PHP5+MySQL5+Zend Optimizer+phpMyAdmin安装配置图文教程 2009年
2009/06/08 PHP
PHP修改session_id示例代码
2014/01/08 PHP
PHP判断表单复选框选中状态完整例子
2014/06/24 PHP
php过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
PHP图像识别技术原理与实现
2016/10/27 PHP
Yii 访问 Gii(脚手架)时出现 403 错误
2018/06/06 PHP
JS类的封装及实现代码
2009/12/02 Javascript
jquery解析xml字符串简单示例
2014/04/11 Javascript
使用Node.js为其他程序编写扩展的基本方法
2015/06/23 Javascript
下雪了 javascript实现雪花飞舞
2020/08/02 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
2016/09/28 Javascript
js多个物体运动功能实例分析
2016/12/20 Javascript
什么是Vue.js框架 为什么选择它?
2017/10/17 Javascript
Vue+webpack+Element 兼容问题总结(小结)
2018/08/16 Javascript
JS/jQuery实现简单的开关灯效果【案例】
2019/02/19 jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
2019/05/14 jQuery
vue+高德地图写地图选址组件的方法
2019/05/18 Javascript
vue中$refs, $emit, $on, $once, $off的使用详解
2019/05/26 Javascript
swiper Scrollbar滚动条组件详解
2019/09/08 Javascript
python实现在windows服务中新建进程的方法
2015/06/30 Python
详解Django之admin组件的使用和源码剖析
2018/05/04 Python
Python smtplib实现发送邮件功能
2018/05/22 Python
Python实现Linux监控的方法
2019/05/16 Python
用Python获取摄像头并实时控制人脸的实现示例
2019/07/11 Python
利用 Flask 动态展示 Pyecharts 图表数据方法小结
2019/09/04 Python
python实现XML解析的方法解析
2019/11/16 Python
Python 生成短8位唯一id实战教程
2021/01/13 Python
39美元购买一副眼镜或太阳镜:39DollarGlasses.com
2018/06/17 全球购物
linux系统都有哪些运行级别
2016/03/26 面试题
如何现实servlet的单线程模式
2014/08/05 面试题
信息与计算科学专业推荐信
2014/02/23 职场文书
三字经教学反思
2014/04/26 职场文书
优秀团员事迹材料1000字
2014/08/20 职场文书
《作风建设永远在路上》心得体会
2016/01/21 职场文书
Python TypeError: ‘float‘ object is not subscriptable错误解决
2022/12/24 Python