使用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 相关文章推荐
JS实现同时搜索百度和必应的方法
Jan 27 Javascript
浅谈JavaScript中的String对象常用方法
Feb 25 Javascript
jQuery中$.extend()用法实例
Jun 24 Javascript
jquery实现华丽的可折角广告代码
Sep 02 Javascript
jQuery插件实现多级联动菜单效果
Dec 01 Javascript
详解JavaScript UTC时间转换方法
Jan 07 Javascript
第一次动手实现bootstrap table分页效果
Sep 22 Javascript
javascript中replace使用方法总结
Mar 01 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
Mar 15 Javascript
使用cropper.js裁剪头像的实例代码
Sep 29 Javascript
JavaScript实现左侧菜单效果
Dec 14 Javascript
vue实现两个区域滚动条同步滚动
Dec 13 Vue.js
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中使用XML
2006/10/09 PHP
linux实现php定时执行cron任务详解
2013/12/24 PHP
单台服务器的PHP进程之间实现共享内存的方法
2014/06/13 PHP
JS 巧妙获取剪贴板数据 Excel数据的粘贴
2009/07/09 Javascript
jQuery初学:find()方法及children方法的区别分析
2011/01/31 Javascript
JS替换文本域内的回车示例
2014/02/18 Javascript
JavaScript中输出标签的方法
2014/08/27 Javascript
jQuery中attr()方法用法实例
2015/01/05 Javascript
js同源策略详解
2015/05/21 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
2015/09/22 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
2015/10/12 Javascript
JavaScript通过代码调用Flash显示的方法
2016/02/02 Javascript
js获取时间精确到秒(年月日)
2016/03/16 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
2016/05/30 Javascript
使用RequireJS库加载JavaScript模块的实例教程
2016/06/06 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
2016/06/13 Javascript
javascript表单控件实例讲解
2016/09/13 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
2018/04/20 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
2018/11/20 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
2019/11/11 jQuery
Python图算法实例分析
2016/08/13 Python
python3实现公众号每日定时发送日报和图片
2018/02/24 Python
利用python list完成最简单的DB连接池方法
2019/08/09 Python
Python tornado上传文件的功能
2020/03/26 Python
哈工大自然语言处理工具箱之ltp在windows10下的安装使用教程
2020/05/07 Python
手工制作的意大利太阳镜和光学元件:Illesteva
2019/01/19 全球购物
养殖行业的创业计划书
2014/01/05 职场文书
促销活动总结怎么写
2014/06/25 职场文书
小学校园广播稿集锦
2014/10/04 职场文书
教师批评与自我批评
2014/10/15 职场文书
2014年公务员个人工作总结
2014/11/22 职场文书
会议欢迎词
2015/01/23 职场文书
2016年清明节期间群众祭祀活动工作总结
2016/04/01 职场文书
Nginx使用Lua模块实现WAF的原理解析
2021/09/04 Servers
python 使用tkinter与messagebox写界面和弹窗
2022/03/20 Python
单机多实例部署 MySQL8.0.20
2022/05/15 MySQL