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

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

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

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

随便下几张图片试试。

<!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. tyvj1098 任务安排

    描述 N个任务排成一个序列在一台机器上等待完成(顺序不得改变),这N个任务被分成若干批,每批包含相邻的若干任务.从时刻0开始,这些任务被分批加工,第i个任务单独完成所需的时间是Ti.在每批任务开始前, ...

  2. SQL 的坑1 除法“”不可用“”

    今天工作中遇见 一问题,有5各部分,现要求5个部分各自的比例,SQL语句没有问题,后来还试了"加","减","乘","Round& ...

  3. Ubuntu12.04安装lnmp环境笔记

    说明:笔记中使用的命令都是在root账户权限下执行的,如果使用的是普通账户,请注意在命令前加上“sudo”指令. 1.更新apt-get软件库: 命令:apt-get update 该操作的目的是确保 ...

  4. Floyed判环/龟兔算法

    求[(5+2√6)2^x+1 ] mod p 的值,其中 0 ≤ x < 232 , p 是个质数,p ≤ 46337 .(这里介绍的是一种暴力的做法) (5+2√6)2^n+1 = an + ...

  5. PHP header函数使用大全

    PHP header函数大全 header('Content-Type: text/html; charset=utf-8'); header('Location: http://52php.cnbl ...

  6. 帝国CMS视频

    http://list.youku.com/albumlist/show?id=17602333&ascending=1.html

  7. 【转】python编码的问题

    摘要: 为了在源代码中支持非ASCII字符,必须在源文件的第一行或者第二行显示地指定编码格式: # coding=utf-8 或者是: #!/usr/bin/python # -*- coding: ...

  8. PHP的单态类——为了产生唯一的对象

    pdo就是使用了单态类,使得对象永远只实例化一次,减少了内存消耗. 单态类: <?php class A{ private static $a = null; private function ...

  9. ecshop商品子分类点击下拉，子分类空时，直接跳转功能

    模板文件循环读取商品分类,并给大分类加上url属性.然后在js中判断是否有下级分类.有分类则点击下拉效果,没有子分类则跳转到url属性的链接去. themes/**/library/category_ ...

  10. JavaScript之bind,call,apply

    参考: http://rangercyh.blog.51cto.com/1444712/1615809 function foo(a,b) { this.x = this.x + a + b; } / ...