<!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. linux笔记一

    1.桌面环境:gnome,kde等 2.虚拟机网络模式: a.VMnet0:用于虚拟桥接网络下的虚拟交换机 b.VMnet1:用于虚拟HOST-Only网络下的虚拟交换机 c.VMnet8:用于虚拟N ...

  2. java四种内部类详解

    一般来说,有4中内部类:常规内部类.静态内部类.局部内部类.匿名内部类. 一.常规内部类:常规内部类没有用static修饰且定义在在外部类类体中.   1.常规内部类中的方法可以直接使用外部类的实例变 ...

  3. Flashback闪回技术小实验

    1闪回查询 2闪回删除 3闪回版本查询 4闪回事务查询 5闪回某张表   6闪回数据库

  4. Html5 与 Html4 的区别

    HTML5是HTML标准的下一个版本.虽然HTML5没有完全颠覆HTML4,但是它们也有一些不同.最新最全的HTML5-HTML4对比信息 请看http://dev.w3.org/html5/html ...

  5. Hibernate saveOrUpdate方法到底是怎么执行的？

    saveOrUpdate方法,如果传入的对象有主键就执行更新,没有就执行新增.这句话误导了很多人. 究竟是执行新增还是更新,是要有上下文环境的.这个环境就是主键策略的选择. 主键生成方式为 手动设置: ...

  6. GsonUtils.java

    package com.vcredit.ddcash.batch.util; import java.util.ArrayList;import java.util.List; import org. ...

  7. Windows7无法访问(远程登录)Windows 2003共享问题解决

    解决方法: 1.直接按下win+r键,输入gpedit.msc,打开本地组策略编辑器. 2.找到“计算机配置”-->“Windows设置”-->“安全设置”-->“本地策略”--&g ...

  8. Android课程---帧布局 FrameLayout

    帧布局的特点是: 1.多个组件,层叠显示 2.所占位置和大小由组件决定 示例代码: <?xml version="1.0" encoding="utf-8" ...

  9. Myeclipse8.5 subscription expired自己动手获取Myeclipse的注册码

    步骤: 1.在myeclipse中新建一个java project 2.在src目录下建立一个名为MyEclipseGen的类 3.将下面的代码复制到该类中,并运行. import java.io.* ...

  10. mysql5.5手册读书日记(3)

    <?php /* MySQL_5.5中文参考手册 587开始 与GROUP BY子句同时使用的函数和修改程序 12.10.1. GROUP BY(聚合)函数 12.10.2. GROUP BY修 ...