<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{
    margin: 0;
    padding: 0;
    list-style: none;
}
#box {
    margin: 0 auto;
    width: 966px;
    overflow: hidden;
}

#box ul {
    width: 300px;
    height: auto;
    float:left;
    margin-right: 20px;
    border: #000 1px solid;
}

#box ul li {
    width: 280px;
    border: #999 1px solid;
    margin: 10px 9px;
}
</style>
<script>
function rnd(n,m){
    return parseInt(Math.random() * (m - n) + n);
}
function createLi(){
    var oLi = document.createElement('li');
    oLi.style.height = rnd(50,300) + 'px';
    oLi.style.background = 'rgb('+rnd(0,256)+','+rnd(0,256)+','+rnd(0,256)+')';    
    return oLi;
}
window.onload = function(){
    var oBox = document.getElementById('box');
    var aUl = oBox.children;
    
    function appendLi(){
        for(var i = 0; i < 15; i++){
        var oLi = createLi();
        var iMinUl;
        var arrUl = [];
        for(var j = 0; j < aUl.length; j++){
            arrUl[j] = aUl[j];    
        }
        arrUl.sort(function(n1,n2){
            return n1.offsetHeight - n2.offsetHeight;
        });
            arrUl[0].appendChild(oLi);
        }    
    }
    appendLi();
    window.onscroll = function(){
        var oScroll = document.documentElement.scrollTop || document.body.scrollTop;
        var clientH = document.documentElement.clientHeight;
        var oBoxh = oBox.scrollHeight;
        if(oScroll + clientH >= oBoxh){
            appendLi();
        }    
    }
}
</script>
</head>

<body>
<div id="box">
    <ul></ul>
    <ul></ul>
    <ul></ul>
</div>
</body>
</html>

js瀑布流的更多相关文章

  1. js瀑布流 原理实现揭秘 javascript 原生实现

    web,js瀑布流揭秘 瀑布流再很久之前流行,可能如我一样入行晚的 ,可能就没有机会去使用.但是这个技术终究是个挺炫酷的东西,花了一个上午来研究,用原生js实现了一个,下面会附上源码,供大家解读. 说 ...

  2. 面向对象js瀑布流效果

    index.html <!doctype html><html lang="en"> <head>  <!--网站编码格式,UTF-8 国 ...

  3. 分享：纯 css 瀑布流 和 js 瀑布流

    分享一次纯 css 瀑布流  和 js 瀑布流 纯 css 写瀑布流 1.multi-columns 方式: 通过 Multi-columns 相关的属性 column-count.column-ga ...

  4. 【js】【图片瀑布流】js瀑布流显示图片20180315

    js实现把图片用瀑布流显示,只需要“jquery-1.11.2.min.js”. js: //瀑布流显示图片 var WaterfallImg = { option: { maxWidth: 850, ...

  5. JS 瀑布流效果

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

  6. js瀑布流（定位法）

    1.首先,自己写好图片路径,引入jquery <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...

  7. JS瀑布流效果

    本篇内容实现类似百度图片的呈现功能,瀑布流+自动加载 index13.html <!DOCTYPE html> <html> <head> <meta cha ...

  8. 比较容易理解的---原生js瀑布流

    最近一直在恶补基础JS H5 CSS3的基础知识 关于这个瀑布流: 本来打算看着教程来做的. 不过 感觉理解起来有点复杂. SO, 自己参考教程默写了一个.. 目前我所接触过的瀑布流布局分为2大类 主 ...

  9. 关于瀑布流的布局原理分析（纯CSS瀑布流与JS瀑布流）

    瀑布流 又称瀑布流式布局,是比较流行的一种网站页面布局方式.即多行等宽元素排列,后面的元素依次添加到其后,等宽不等高,根据图片原比例缩放直至宽度达到我们的要求,依次按照规则放入指定位置. 为什么使用瀑 ...

  10. 原声JS瀑布流加延迟载入

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. SQL sp_executesql【转】

    execute相信大家都用的用熟了,简写为exec,除了用来执行存储过程,一般都用来执行动态Sql sp_executesql,sql2005中引入的新的系统存储过程,也是用来处理动态sql的, 如: ...

  2. 配置perl-cgi的运行环境，由于Active Perl安装在d:\perl

    Apache 1.3.22 for Win32+PHP 4.0.6+Active Perl 5.006001+Zend Optimizer v1.1.0+mod_gzip 1.3.19.1a+MySQ ...

  3. java FileLock

    import java.nio.ByteBuffer; import java.nio.IntBuffer; import java.nio.channels.FileChannel; import ...

  4. 一个关于Delphi XML处理单元的BUG

    使用delphi的XML处理单元 XMLDoc XMLIntf 在获取XML文本内容的时候, 高版本的Delphi会丢失编码描述....在D7上却是正常的, 下面是测试源码: procedure TF ...

  5. 用Appium进行android自动化测试

    appium是开源的移动端自动化测试框架,可以测试ios,android应用.appium让移动端自动化测试不必限定在某种语言和某个具体的框架:也就是说任何人都可以使用自己最熟悉最顺手的语言以及框架来 ...

  6. JMeter学习-021-JMeter 定时器（Synchronizing Timer）之集合点应用

    性能测试中我们经常提到一个概念就是“并发”,其实在实际真实的性能测试中是不存在真正的并发的.为了更真实的模拟对一个请求的并发测试场景,我们通常设置一个集合点,JMeter中提供了这样的一个功能设置. ...

  7. MySQL学习笔记——ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO)

    ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO) Enter password: E ...

  8. Synchronized 个人深解

      1.synchronized方法相当于synchronized(this)      Synchronized 方法是锁的当前对象,同一个对象的2个synchronized方法被2个线程调用会发生 ...

  9. 真正的让iframe自适应高度 兼容多种浏览器随着窗口大小改变

    今天有朋友问到我关于"iframe自适应高度"的问题,原本以为是很简单的问题,没想到折腾了20分钟才搞定.期间遇到几个问题,要么是高度自适应了,但是当窗口改变时会出现滚动条.也就是 ...

  10. LUA脚本调用C场景，使用C API访问脚本构造的表

    LUA调用C lua解析中集成了一些系统服务, 故脚本中可以访问系统资源, 例如, lua脚本可以调用文件系统接口, 可以调用数学库, 但是总存在一些lua脚本中访问不到的系统服务或者扩展功能, 如果 ...