使用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 相关文章推荐
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
Sep 22 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
Aug 23 Javascript
js中split函数的使用方法说明
Dec 26 Javascript
JS实现点击上移下移LI行数据的方法
Aug 05 Javascript
jQuery实现可高亮显示的二级CSS菜单效果
Sep 01 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
Nov 21 Javascript
Canvas放置反弹效果随机图形(实例)
Aug 17 Javascript
浅谈Vue2.0父子组件间事件派发机制
Jan 08 Javascript
iView框架问题整理小结
Oct 16 Javascript
如何利用ES6进行Promise封装总结
Feb 11 Javascript
js仿360开机效果
Dec 26 Javascript
JavaScript this使用方法图解
Feb 04 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简单实现加减乘除计算器
2014/01/06 PHP
PHP+Ajax+JS实现多图上传
2016/05/07 PHP
php基于curl重写file_get_contents函数实例
2016/11/08 PHP
PHP7 mongoDB扩展使用的方法分享
2019/05/02 PHP
Laravel框架路由管理简单示例
2019/05/07 PHP
javascript js cookie的存储,获取和删除
2007/12/29 Javascript
用Javascript评估用户输入密码的强度(Knockout版)
2011/11/30 Javascript
javascript获取URL参数与参数值的示例代码
2013/12/20 Javascript
网页收藏夹显示ICO图标(代码少)
2015/08/04 Javascript
浏览器复制插件zeroclipboard使用指南
2016/03/26 Javascript
vue自定义指令实现v-tap插件
2016/11/03 Javascript
JS Select下拉框(支持输入模糊查询)
2017/02/04 Javascript
JavaScript寄生组合式继承原理与用法分析
2019/01/11 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
2019/05/05 Javascript
详解vuex的简单todolist例子
2019/07/14 Javascript
vue实现axios图片上传功能
2019/08/20 Javascript
[50:44]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第二场 2月22日
2021/03/11 DOTA
浅谈Python爬取网页的编码处理
2016/11/04 Python
python爬虫系列Selenium定向爬取虎扑篮球图片详解
2017/11/15 Python
Python 确定多项式拟合/回归的阶数实例
2018/12/29 Python
python 列表中[ ]中冒号‘:’的作用
2019/04/30 Python
欧舒丹加拿大官网:L’Occitane加拿大
2017/10/29 全球购物
美国职棒大联盟官方网上商店:MLBShop.com
2017/11/12 全球购物
三星俄罗斯授权在线商店:Samsung俄罗斯
2019/09/28 全球购物
AJax面试题
2014/11/25 面试题
经典优秀个人求职信分享
2013/12/12 职场文书
经济管理专业自荐信
2013/12/30 职场文书
班班通项目实施方案
2014/02/25 职场文书
我的未来不是梦演讲稿
2014/09/02 职场文书
渠道运营商合作协议书范本
2014/10/06 职场文书
干部个人考察材料
2014/12/24 职场文书
教师求职自荐信
2015/03/26 职场文书
政工师工作总结2015
2015/05/26 职场文书
金砖之国观后感
2015/06/11 职场文书
工程进度款催款函
2015/06/24 职场文书
浅谈Redis的keys命令到底有多慢
2021/10/05 Redis