不知大家有没有发现，一般的图片展示网站都会使用瀑布流效果，所谓的瀑布流

就是网站内的图片不会一下子全缓存出来，而是等你滚动到一定的距离的时候，

下面的图片才会继续缓存，并且图片也是随机出现的，只是宽度一样，高度并不

一样，高高低低就像瀑布一样，所以叫做瀑布流效果。下面我把代码给大家，大家

随便下几张图片试试。

<!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="data: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实现图片展示瀑布流效果的更多相关文章

  1. js实现图片的瀑布流

    先看效果: 初始状态:

  2. 利用JS实现简单的瀑布流效果

    哈哈, 我又来啦, 在这一段时间里, 我简单的学习了一下javascript(JS), 虽然不是很懂啦, 但是我也简单的尝试着做了点小东西, 就比如现在流行的瀑布流效果, 经过我的努力终于成功的完成了 ...

  3. js实现的美女瀑布流效果代码

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  4. 用jQuery实现瀑布流效果学习笔记

    jQuery一直没系统的学,只知道是js库,封装了好多js函数,方便了开发.以前做过一个原生的图片网站瀑布流效果,超级麻烦,这次用了jQuery方法,瞬间代码浓缩了,只有56行js代码.神奇的让我来把 ...

  5. js图片瀑布流效果

    要实现图片瀑布流效果,首先得准备几张图片. html的部分比较简单就是将图片加载到浏览器就可以了 代码如下(注意放的图片多一点要不然之后无法滑动鼠标就无法达到瀑布流效果): <!DOCTYPE ...

  6. js 实现图片瀑布流效果，可更改配置参数 带完整版解析代码[waterFall.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS实现图片瀑布流效果 页面需求 1 ...

  7. 手把手教你js原生瀑布流效果实现

    手把手教你js原生瀑布流效果实现 什么是瀑布流效果 首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一 ...

  8. 利用LruCache载入网络图片实现图片瀑布流效果(改进版)

    PS: 2015年1月20日21:37:27 关于LoadImageAsyncTask和checkAllImageViewVisibility可能有点小bug 改动后的代码请參见升级版本号的代码 ht ...

  9. JS 瀑布流效果

    JS瀑布流效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...

随机推荐

  1. tyvj1172 自然数拆分Lunatic版

    背景 话说小小鱼看了P1171(自然数拆分)之后感觉异常不爽,于是异常邪恶地将题目加强. 描述 输入自然数n,然后将其拆分成由若干数相加的形式,参与加法运算的数可以重复. 输入格式 输入只有一个整数n ...

  2. struts2 用if标签判断字符串包含

    String testStr = "用来判断是否包含的字符串"; <s:property value="testStr"/> <s:if te ...

  3. C和指针 第三章 习题

    在一个源文件中,有两个函数x和y,定义一个链接属性external储存类型static的变量a,且y可以访问,x不可以访问,该如何定义呢? #include <stdio.h> void ...

  4. AngularJS 配置和运行phonecat错误

    安装node.js 就按照入门上的步骤来就行了 第一步:下载安装node.js,并将程序路径添加到环境变量中PATH中 第二步:下载git版本控制软件 第三步:在git目录下点击git-bash.ex ...

  5. screen 常用命令

    screen -r <id | name>  # 进入 screen C-a c # ctrl+a + c , 新建screen窗口 C-a A # ctrl+a + A, 命名scree ...

  6. 守护神 Supervisor

    参考: http://linbo.github.io/2013/04/04/supervisor/ http://www.restran.net/2015/10/04/supervisord-tuto ...

  7. java 深入技术六（Map）

    Map 1.map概述 map.put(key,value)里面存放的是两个相关的数据,key=value键值对 Map集合中存放的是键值对(put(key,value)),用get(key)获取集合 ...

  8. DIV+CSS 清除浮动方法总结

    DIV+CSS 清除浮动是页面布局中常见的问题,相信各位高手也都有自己的方法,今天在这里对常见的几种方法进行总结(PS:谈不上是原创,这里是我自己做的归纳总结,也是我自己内化的过程),希望对您能够有所 ...

  9. MySql中的字符数据类型

    MySql中的varchar类型 1.varchar类型的变化 MySQL数据库的varchar类型在4.1以下的版本中的最大长度限制为255,其数据范围可以是0~255或1~255根据不同版本数据库 ...

  10. 常用MIME类型(Flv,Mp4的mime类型设置)（转载）

    转载地址:http://www.cuplayer.com/player/Help/2011/0625/83.html 也许你会在纳闷,为什么我上传了flv或MP4文件到服务器,可输入正确地址通过htt ...