<!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. 无法删除DLL文件解决方法（转）

    手动解决dll文件无法删除的终极方法 手动解决dll文件无法删除的终极方法 相信大家都遇见过:在删除一些软件的时候弹出某某文件正在运行或磁盘写保护不能删除这样的报错提示吧.而常常删除不掉的都一些后缀为 ...

  2. 改centos7的网卡名

    学习参考的文章,地址双手奉上http://www.linuxidc.com/Linux/2015-09/123396.htm 1.查看服务器的流量使用情况,执行命令cat /proc/net/dev ...

  3. ckeditor简单的演示

    先把ckeditor文件添加到项目中 然后在页面上引用 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml& ...

  4. Android课程---Activity 带返回值的跳转

    Activity2.java package com.hanqi.test4; import android.content.Intent; import android.os.Bundle; imp ...

  5. CentOS下搭建nginx+php环境

    一.下载安装nginx 参见 http://www.cnblogs.com/kreo/p/4378086.html 不再赘述 二.下载php #下载 wget http://bg2.php.net/d ...

  6. [daily]使用rdtsc指令，测量程序的运行速度 [转]

    原文地址:http://blog.chinaunix.net/uid-24774106-id-2779245.html 最近搞架构,一直在讨论.听人提到,自行科普了一下,先转发,mark.有机会深入学 ...

  7. Pinyin 输入法安装 opensuse 13 gnome

    1 安装 拼音输入法 zypper in pinyin      (scim 包含) 2 安装包 scim,scim-m17n,scim-pinyin,scim-qtimm,scim-tables,s ...

  8. centos7安装出现license information(license not accepted)解决办法

    若出现license information(license not accepted),即说明需要同意许可信息,输入1-回车-2-回车-c-回车-c回车,即可解决.

  9. ionic实现手机检测app是否安装，未安装则下载安装包，已安装则打开app（未实现iOS平台）

    插件需求(上cordova官网下载): com.lampa.startapp cordova-plugin-appavailability cordova-plugin-inappbrowser 代码 ...

  10. Jmeter多机并发压测IP地址问题

    meter.engine.RemoteJMeterEngineImpl: Local IP address=192.168.56.1 不能成功链家到相应的压力机 解决步骤: 1.找到jmeter.ba ...