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

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

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

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

随便下几张图片试试。

<!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. linux下共享库的注意点之-fpic

    在编译共享库必须加上-fpic.这是为什么呢? 首先看一个简单的例子: #include <stdio.h> int fun1() { printf("fun1\n") ...

  2. [Kerberos] Kerberos 认证过程整理

    Kerberos是一种安全认证协议,意在提供 more secure authentication simplified management of password convenience of s ...

  3. UI第九节——UIStepper

    - (void)viewDidLoad {    [super viewDidLoad];        // 实例化UIStepper,大小是固定的    UIStepper *stepper = ...

  4. Go - 字典（map）

    字典是一种内置的数据结构,用来保存 键值对 的 无序集合. (1)字典的创建 1) make(map[KeyType] ValueType, initialCapacity) 2) make(map[ ...

  5. Node.js与Express4安装与配置

    Nodejs简介 Node.js 基于 Chrome JavaScript 运行环境,用于便捷地搭建快速.可扩展的网络应用. 它使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效, 非常适合 ...

  6. Vue in 2016

    原文链接:Vue in 2016 Vue 作者尤雨溪对 Vue 在 2016 年的总结以及未来的展望 现在已经是2016的尾声了!在这过去的12个月里,Vue的持续增长速度已经超过了我的预期--这个项 ...

  7. 12个非常实用的JavaScript小技巧

    在这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是 ...

  8. MVC和Webform的比较和替换总结

    1.自定义控件,页面赋值可用HtmlHelper进行扩展 2.aspx的母版页可用Layout代替 3.webform的request,response方法在MVC中同样适应,只是类有点不同,例如表单 ...

  9. IBatis和Hibernate区别

    1. 简介 Hibernate是当前最流行的O/R mapping框架.它出身于sf.net,现在已经成为Jboss的一部分了.iBATIS是另外一种优秀的O/R mapping框架,现已改名叫myB ...

  10. 工欲善其事-Eclipse设置

    1.注释设置 [重要可以保存使用] 在菜单栏Window--->Preferences--->Java--->Code Style--->Code Templates然后展示C ...