使用JS实现图片展示瀑布流效果的实例代码


Posted in Javascript onSeptember 12, 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 模拟类搜索框自动完成搜索提示功能(改进)
May 24 Javascript
js change,propertychange,input事件小议
Dec 20 Javascript
JS命名空间的另一种实现
Aug 09 Javascript
javascript学习笔记之10个原生技巧
May 21 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
Jun 06 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
Jul 28 Javascript
用js写的一个路由(简单实例)
Sep 24 Javascript
Javacript中自定义的map.js  的方法
Nov 26 Javascript
总结js函数相关知识点
Feb 27 Javascript
vue首次赋值不触发watch的解决方法
Sep 11 Javascript
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
JS实现骰子3D旋转效果
Oct 24 Javascript
关于javascript的一些知识以及循环详解
Sep 12 #Javascript
基于AngularJS实现iOS8自带的计算器
Sep 12 #Javascript
Javascript6中字符串的四个新用法分享
Sep 11 #Javascript
JavaScript制作简单分页插件
Sep 11 #Javascript
关于vue.js弹窗组件的知识点总结
Sep 11 #Javascript
JavaScript常用代码书写规范的超全面总结
Sep 11 #Javascript
Javascript实现前端简单的路由实例
Sep 11 #Javascript
You might like
PHP如何透过ODBC来存取数据库
2006/10/09 PHP
PHP实现关键字搜索后描红功能示例
2019/07/03 PHP
PHP+ajax实现上传、删除、修改单张图片及后台处理逻辑操作详解
2020/02/12 PHP
在VS2008中使用jQuery智能感应的方法
2010/12/30 Javascript
js 判断checkbox是否选中的操作方法
2012/11/09 Javascript
js格式化时间和js格式化时间戳示例
2014/02/10 Javascript
javascript进行数组追加方法小结
2014/06/16 Javascript
JavaScript的各种常见函数定义方法
2014/09/16 Javascript
用js读、写、删除Cookie代码续篇
2014/12/03 Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
2016/11/21 Javascript
node.js 和HTML5开发本地桌面应用程序
2016/12/13 Javascript
JavaScript中清空数组的三种方式
2017/03/22 Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
2017/05/24 Javascript
Vue实现web分页组件详解
2017/11/28 Javascript
vue项目打包部署_nginx代理访问方法详解
2018/09/20 Javascript
JavaScript实现PC端横向轮播图
2020/02/07 Javascript
详解python之简单主机批量管理工具
2017/01/27 Python
解决nohup重定向python输出到文件不成功的问题
2018/05/11 Python
python射线法判断一个点在图形区域内外
2019/06/28 Python
python+selenium 点击单选框-radio的实现方法
2019/09/03 Python
python之yield和Generator深入解析
2019/09/18 Python
python为QT程序添加图标的方法详解
2020/03/09 Python
浅谈Python协程
2020/06/17 Python
python中_del_还原数据的方法
2020/12/09 Python
加拿大女包品牌:Matt & Nat
2017/05/12 全球购物
化石印度尼西亚在线商店:Fossil Indonesia
2019/03/11 全球购物
财务主管的岗位职责
2013/12/30 职场文书
给领导的致歉信范文
2014/01/13 职场文书
物业保安员岗位职责
2014/03/14 职场文书
诉讼代理人授权委托书
2014/04/08 职场文书
平安工地建设方案
2014/05/06 职场文书
公开承诺书格式
2014/05/21 职场文书
销售竞赛活动方案
2014/08/23 职场文书
2014小学生国庆65周年演讲稿
2014/09/21 职场文书
Nginx反向代理及负载均衡如何实现(基于linux)
2021/03/31 Servers
MySQL sql模式设置引起的问题
2022/05/15 MySQL