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

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

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

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

随便下几张图片试试。

<!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. 百度地图用ip获取当前位置的经纬度（高精度）

    步骤比较简单先上百度地图API官网,申请一个应用AK(访问凭据):查看一下高进度定位的API,看看是否都符合要求下面直接上代码 /** * 根据ip获取地理坐标 * @param ip * @retu ...

  2. Web前端学习笔记：Bootstrap框架

    很久之前就有很多人给我推荐twitter的Bootstrap框架,但是直到前几天我才真正学习了下Bootstrap,的确是相当棒的框架,至少从视觉体验上超越了很多以前碰到了前端UI框架.今天我要聊聊B ...

  3. hmm

    http://www.cnblogs.com/mindpuzzle/p/3653043.html http://en.wikipedia.org/wiki/Viterbi_algorithm http ...

  4. 我与A协

    大学毕业以后发现离曾经的圈子越来越远,非常怀念原来在A协和大家一起奋斗的日子,在这里写一篇文章,献给有很多美好回忆的A协,也献给渐渐远离A协的我. 首先,回顾一下我为什么会参与到A协的建设工作中来.我 ...

  5. iOS 8.0后使用UIAlertController

    iOS 8的新特性之一就是让接口更有适应性.更灵活,因此许多视图控制器的实现方式发生了巨大的变化.全新的UIPresentationController在实现视图控制器间的过渡动画效果和自适应设备尺寸 ...

  6. JS判断是否是微信页面，判断手机操作系统（ios或android）并跳转到不同下载页面

    JS判断客户端是否是iOS或者Android 参考:http://caibaojian.com/browser-ios-or-android.html function is_weixin() { v ...

  7. 对oracle数据库Blob字段的操作

    java实体类 定义类型 byte[] private byte[] str_blob hibernate映射文件类型oracle.sql.BLOB <property name="s ...

  8. SpringBoot实战配置

    http://blog.csdn.net/sun_t89/article/details/51944252 http://www.cnblogs.com/kreo/p/4423362.html

  9. Python WebDriver自动化测试

    转载来自: http://www.cnblogs.com/fnng/p/3160606.html Webdriver Selenium 是 ThroughtWorks 一个强大的基于浏览器的开源自动化 ...

  10. GO语言中json与map的转换

    直接上代码(需要引入encoding/json包) // 当前程序的包名 package main // 导入其它的包 import ( "encoding/json" " ...