使用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中:表达式和语句的区别[译]
Sep 17 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
Sep 01 Javascript
在JavaScript中使用JSON数据
Feb 15 Javascript
ajax在兼容模式下失效的快速解决方法
Mar 22 Javascript
jquery实现图片上传前本地预览功能
May 10 Javascript
Vue框架之goods组件开发详解
Jan 25 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
Aug 24 Javascript
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
微信小程序(订阅消息)功能
Oct 25 Javascript
vue 实现动态路由的方法
Jul 06 Javascript
浅谈vue 组件中的setInterval方法和window的不同
Jul 30 Javascript
vue中div禁止点击事件的实现
Apr 02 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防注入,表单提交值转义的实现详解
2013/06/10 PHP
PHP数组遍历的几种常见方式总结
2019/02/15 PHP
php实现映射操作实例详解
2019/10/02 PHP
jQuery-ui引入后Vs2008的无智能提示问题解决方法
2014/02/10 Javascript
浅谈JavaScript字符集
2014/05/22 Javascript
技术男用来对妹子表白的百度首页
2014/07/23 Javascript
JavaScript中用toString()方法返回时间为字符串
2015/06/12 Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
2021/01/20 Javascript
AngularJS基础 ng-show 指令简单示例
2016/08/03 Javascript
Javascript中call,apply,bind方法的详解与总结
2016/12/12 Javascript
js实现密码强度检验
2017/01/15 Javascript
搭建简单的nodejs http服务器详解
2017/03/09 NodeJs
Vue 2.X的状态管理vuex记录详解
2017/03/23 Javascript
ionic3 懒加载
2017/08/16 Javascript
JS中关于正则的巧妙操作
2017/08/31 Javascript
Rollup处理并打包JS文件项目实例代码
2018/05/31 Javascript
js判断密码强度的方法
2020/03/18 Javascript
探索Python3.4中新引入的asyncio模块
2015/04/08 Python
numpy中的高维数组转置实例
2018/04/17 Python
Python Requests模拟登录实现图书馆座位自动预约
2018/04/27 Python
在windows下Python打印彩色字体的方法
2018/05/15 Python
Python使用Selenium模块模拟浏览器抓取斗鱼直播间信息示例
2018/07/18 Python
Python Socket编程之多线程聊天室
2018/07/28 Python
Python 图像处理: 生成二维高斯分布蒙版的实例
2019/07/04 Python
使用pycharm和pylint检查python代码规范操作
2020/06/09 Python
python接入支付宝的实例操作
2020/07/20 Python
基于Modernizr 让网站进行优雅降级的分析
2013/04/21 HTML / CSS
妈妈活动方案
2014/08/15 职场文书
浪漫婚礼主题活动策划方案
2014/09/15 职场文书
2014年干部培训工作总结
2014/12/17 职场文书
经理岗位职责范本
2015/04/15 职场文书
遗失证明范文
2015/06/19 职场文书
Redis6.0搭建集群Redis-cluster的方法
2021/05/08 Redis
JPA如何使用entityManager执行SQL并指定返回类型
2021/06/15 Java/Android
PyTorch中的torch.cat简单介绍
2022/03/17 Python
使用 CSS 构建强大且酷炫的粒子动画效果
2022/08/14 HTML / CSS