使用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 相关文章推荐
javascript 写类方式之八
Jul 05 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
Jun 15 Javascript
js函数内变量的作用域分析
Jan 12 Javascript
javascript实现的固定位置悬浮窗口实例
Apr 30 Javascript
javascript中substring()、substr()、slice()的区别
Aug 30 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
Sep 11 Javascript
webpack学习教程之publicPath路径问题详解
Jun 17 Javascript
Vue使用zTree插件封装树组件操作示例
Apr 25 Javascript
解决Vue打包后访问图片/图标不显示的问题
Jul 25 Javascript
javascript 模块依赖管理的本质深入详解
Apr 30 Javascript
javascript实现电商放大镜效果
Nov 23 Javascript
JavaScript中的宏任务和微任务详情
Nov 27 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
php桌面中心(四) 数据显示
2007/03/11 PHP
PHP pathinfo()获得文件的路径、名称等信息说明
2011/09/13 PHP
php多维数组去掉重复值示例分享
2014/03/02 PHP
php中执行系统命令的方法
2015/03/21 PHP
PHP将身份证正反面两张照片合成一张图片的代码
2017/04/08 PHP
javascript 写的一个简单的timer
2009/07/30 Javascript
document.documentElement的一些使用技巧
2013/04/18 Javascript
Jquery中children与find之间的区别详细解析
2013/11/29 Javascript
IE浏览器不支持getElementsByClassName的解决方法
2014/08/27 Javascript
jQuery横向擦除焦点图特效代码分享
2015/09/06 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
2016/07/11 Javascript
JS路由跳转的简单实现代码
2017/09/21 Javascript
JavaScript 异步调用
2017/10/25 Javascript
JS二分查找算法详解
2017/11/01 Javascript
开发Vue树形组件的示例代码
2017/12/21 Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
2019/06/14 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
2019/12/07 Javascript
Python中 map()函数的用法详解
2018/07/10 Python
对Python3使运行暂停的方法详解
2019/02/18 Python
Python3 利用face_recognition实现人脸识别的方法
2020/03/13 Python
python中sort sorted reverse reversed函数的区别说明
2020/05/11 Python
浅谈css3中的渐进增强和优雅降级
2017/12/01 HTML / CSS
NFL加拿大官方网上商店:NHLShop.ca
2019/03/12 全球购物
财政局长自荐信范文
2013/12/22 职场文书
《自选商场》教学反思
2014/02/14 职场文书
委托书格式要求
2015/01/28 职场文书
五星级酒店前台接待岗位职责
2015/04/02 职场文书
公司禁烟通知
2015/04/23 职场文书
2015年超市员工工作总结
2015/05/04 职场文书
辩护词范文大全
2015/05/21 职场文书
详解运行Python的神器Jupyter Notebook
2021/06/03 Python
Java 数组内置函数toArray详解
2021/06/28 Java/Android
SpringDataJPA在Entity中常用的注解介绍
2021/12/06 Java/Android
《游戏王:大师决斗》将推出新卡牌包4月4日上线
2022/03/31 其他游戏
详解ZABBIX监控ESXI主机的问题
2022/06/21 Servers
Go 内联优化让程序员爱不释手
2022/06/21 Golang