使用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 相关文章推荐
用JS实现一个页面多个css样式实现
May 29 Javascript
理解Javascript_15_作用域分配与变量访问规则,再送个闭包
Oct 20 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
Aug 26 Javascript
js中日期的加减法
May 06 Javascript
AngularJS基础 ng-if 指令用法
Aug 01 Javascript
超全面的vue.js使用总结
Feb 12 Javascript
vue实现消息的无缝滚动效果的示例代码
Dec 05 Javascript
vuex与组件联合使用的方法
May 10 Javascript
Javascript实现异步编程的过程
Jun 18 Javascript
解决Angular2 router.navigate刷新页面的问题
Aug 31 Javascript
vue实现图片预览组件封装与使用
Jul 13 Javascript
vscode 调试 node.js的方法步骤
Sep 15 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 中文字符入库或显示乱码问题的解决方法
2010/04/12 PHP
PHP 命令行参数详解及应用
2011/05/18 PHP
基于php伪静态的实现详细介绍
2013/04/28 PHP
php旋转图片90度的方法
2013/11/07 PHP
php中调用其他系统http接口的方法说明
2014/02/28 PHP
PHP迭代器接口Iterator用法分析
2017/12/28 PHP
用javascript编写的第一人称射击游戏
2007/02/25 Javascript
使用UglifyJS合并/压缩JavaScript的方法
2012/03/07 Javascript
Extjs优化(二)Form表单提交通用实现
2013/04/15 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
2015/03/03 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
2015/08/24 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
2016/07/15 Javascript
浅谈JS继承_寄生式继承 &amp; 寄生组合式继承
2016/08/16 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
2018/07/03 Javascript
如何在项目中使用log4.js的方法步骤
2019/07/16 Javascript
[03:22]DOTA2超级联赛专访单车:找到属于自己的英雄
2013/06/08 DOTA
[01:18]一目了然!DOTA2DotA快捷操作对比第一弹
2014/07/01 DOTA
Django的session中对于用户验证的支持
2015/07/23 Python
django项目运行因中文而乱码报错的几种情况解决
2017/11/07 Python
Python 图片处理库exifread详解
2021/02/25 Python
联想美国官方商城:Lenovo美国
2017/06/19 全球购物
WEB控件及HTML服务端控件能否调用客户端方法?如果能,请解释如何调用?
2015/08/25 面试题
有模特经验的简历自我评价
2013/09/19 职场文书
家长给老师的道歉信
2014/01/13 职场文书
电气工程自动化求职信
2014/03/14 职场文书
开门红主持词
2014/04/02 职场文书
法人委托书范本
2014/09/15 职场文书
普通党员个人对照检查材料
2014/09/18 职场文书
教师党员自我剖析材料
2014/09/29 职场文书
2015年科室工作总结
2015/04/10 职场文书
小学中队长竞选稿
2015/11/20 职场文书
2016优秀护士求职自荐信
2016/01/28 职场文书
忆童年!用Python实现愤怒的小鸟游戏
2021/06/07 Python
详解Java分布式事务的 6 种解决方案
2021/06/26 Java/Android
MySQL令人大跌眼镜的隐式转换
2021/08/23 MySQL
SQL Server表分区降低运维和维护成本
2022/04/08 SQL Server