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

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

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

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

随便下几张图片试试。

<!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. 个性化设置phpMyAdmin，去掉“以树形显示数据库”，禁用“发送错误报告”

    个性化设置phpMyAdmin 在使用phpMyAdmin 3.5.8.2时,发现: 如果数据库有相同的前缀,左边数据库导航会把前缀合并,即所谓的“以树形显示数据库”,真的有点不习惯,如下图所示: 不 ...

  2. Alpha版本十天冲刺——Day 10

    站立式会议 最后一天,很高兴我们做出了跟预期差不多的版本,实现了基本功能,虽然还有一些bug,但是下一阶段我们会继续加油! 会议总结 队员 今天完成 遇到的问题 感想 鲍亮 功能细节更改 我的手机运行 ...

  3. 如何使用JS来检测游览器是什么类型，或android是什么版本号- 转载

    var brower = { versions:function(){ var u = window.navigator.userAgent; var num ; if(u.indexOf('Trid ...

  4. BZOJ1565——[NOI2009]植物大战僵尸

    1.题意:有一些点,点与点之间有保护关系,每个点都有一个权值,求能获得的最大值 2.分析:裸的最大权闭合图,用网络流进行求解,然后我们发现点与点之间的保护关系可能构成环,这样网络流是无法处理的,然后我 ...

  5. Python基本数据类型

    一.整数 int(整形) 在32位机器上,整数的位数为32位,取值范围为-2**31~2**1-1,即-2147483648-2147483647 在64位系统上,整数的位数为64位,取值范围为-2* ...

  6. jquery之toggleClass应用

    今天记载一下常用的html + css + jquery效果应用 1.html内容 <div class="selBtn screen_btn"> <a id=& ...

  7. Effective C++ -----条款54：让自己熟悉包括TR1在内的标准程序库

    C++ 标准程序库的主要机能由STL.iostream.locales 组成.并包含C99 标准程序库. TR1 添加了只能指针(例如 tr1::shared_ptr).一般化函数指针(tr1::fu ...

  8. nfs部署和优化

    nfs--网络文件系统 1.说明:允许一个系统在网络上与他人共享目录和文件 2.好处:通过nfs服务,就可以让这个机器访问远程的文件,像访问自己的文件一样,属于cs通信   3.原理说明:假设有A,B ...

  9. Android开发之---Activity生命周期

    Android开发中,有四大组件:Activity.Service.Content Provider.Broadcast Receiver,可以说,activity的使用是最频繁的了,这里来梳理一下与 ...

  10. 去掉input框点击时的默认颜色

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 < ...