使用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 私有成员分析
Jan 13 Javascript
探讨javascript是不是面向对象的语言
Nov 21 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
Sep 01 Javascript
浅谈javascript中自定义模版
Jan 29 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
Feb 20 Javascript
使用JavaScript 实现的人脸检测
Mar 24 Javascript
JQuery实现动态添加删除评论的方法
May 18 Javascript
AngularJS 单元测试(一)详解
Sep 21 Javascript
Angular路由简单学习
Dec 26 Javascript
javascript 数据存储的常用函数总结
Jun 01 Javascript
AngularJS页面带参跳转及参数解析操作示例
Jun 28 Javascript
JavaScript设计模式之命令模式实例分析
Jan 16 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 XML error parsing SOAP payload on line 1
2010/06/17 PHP
PHP文件读写操作之文件读取方法详解
2011/01/13 PHP
浅析THINKPHP的addAll支持的最大数据量
2015/02/03 PHP
php 流程控制switch的简单实例
2016/06/07 PHP
PHP常用算法和数据结构示例(必看篇)
2017/03/15 PHP
js字符编码函数区别分析
2008/06/05 Javascript
jQuery chili图片远处放大插件
2009/11/30 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
2013/08/28 Javascript
有效提高JavaScript执行效率的几点知识
2015/01/31 Javascript
JS设置cookie、读取cookie、删除cookie
2015/04/17 Javascript
pc加载更多功能和移动端下拉刷新加载数据
2016/11/07 Javascript
微信小程序 网络请求(GET请求)详解
2016/11/16 Javascript
angularjs的select使用及默认选中设置
2017/04/08 Javascript
Vue组件通信实践记录(推荐)
2017/08/15 Javascript
简易Vue评论框架的实现(父组件的实现)
2018/01/08 Javascript
vue 实现特定条件下绑定事件
2019/11/09 Javascript
Vue使用Three.js加载glTF模型的方法详解
2020/06/14 Javascript
[01:23:59]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 VP vs Secret
2018/04/03 DOTA
[10:53]2018DOTA2国际邀请赛寻真——EG
2018/08/11 DOTA
numpy数组拼接简单示例
2017/12/15 Python
Python multiprocess pool模块报错pickling error问题解决方法分析
2019/03/20 Python
详解python解压压缩包的五种方法
2019/07/05 Python
python3 字符串知识点学习笔记
2020/02/08 Python
巴西最大的家具及装饰用品店:Mobly
2017/10/11 全球购物
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/01/13 面试题
怎么写有吸引力的自荐信
2013/11/17 职场文书
面试后感谢信
2014/02/01 职场文书
人力资源经理的岗位职责范本
2014/02/28 职场文书
小学生综合素质评语
2014/04/23 职场文书
超市商业计划书
2014/05/04 职场文书
电气自动化求职信
2014/06/24 职场文书
2014年医院工作总结
2014/11/20 职场文书
2014年高中教师工作总结
2014/12/19 职场文书
开业庆典致辞
2015/08/01 职场文书
2016年父亲节寄语
2015/12/04 职场文书
只用40行Python代码就能写出pdf转word小工具
2021/05/31 Python