<!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. 初始化char指针--赋值和strcpy() 本质区别【转】

    原文地址:http://hi.baidu.com/todaygoodhj/item/0500b341bf2832e3bdf45180 使用常量字符串初始化char指针,或者使用strcpy复制,从语法 ...

  2. 转载：有关qsort的使用方法和注意事项

    七种qsort排序方法 <本文中排序都是采用的从小到大排序> 一.对int类型数组排序 int num[100]; Sample: int cmp ( const void *a , co ...

  3. 将filenames里的每个字符串输出到out文件对象中注意行首的缩进

    在Linux上用强大的shell脚本应该也可以完成,可是使用Windows的朋友呢?其实象这样一个简单任务用Python这个强大脚本语言只要几条语句就可以搞定了.个大家知道,要完成这样一个任务根本不用 ...

  4. BizTalk动手实验（十一）自定义开发管道组件

    1 课程简介 通过本课程熟悉自定义开始管道组件的流程.各组件接口的功能作用以及自定义管道. 本场景为开发一个消息ZIP压缩的发送管道组件. 2 准备工作 1. 熟悉管道组件各阶段组成 2. 下载Ion ...

  5. Python数据类型（3）

    字符串(str):单引号''.双引号""嵌套使用,可以不使用转义字符:'abc"dd"ef'."acc'd'12",字符串不可以是多行的三单 ...

  6. IOS第七天(2:UiTableView 加上数据分离)

    ****加上数据分离 #import "HMViewController.h" #import "HMStudent.h" @interface HMViewC ...

  7. C# 结构转化

    一.string 转 char[] string ss = "alsofly"; char[] cc = ss.ToCharArray(); 二.char[] 转 string c ...

  8. 【iCore3 双核心板】例程四：USART通信实验——通过命令控制LED

    实验指导书及代码包下载: http://pan.baidu.com/s/1pJxluWF iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...

  9. 【iCore3 双核心板】例程二十六：MODBUS TCP实验——电源监控

    实验指导书及代码包下载: http://pan.baidu.com/s/1pKhxKd9 iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...

  10. 如何正确使用css中vertical-align

    首先明确,vertical-align只对inline-block和inline元素有效. 在说vertical-align之前,需要先说明一下什么是line box. 浏览器中显示的一行会包含多个非 ...