<!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. 一次有趣的XSS漏洞挖掘分析（1）

    最近认识了个新朋友,天天找我搞XSS.搞了三天,感觉这一套程序还是很有意思的.因为是过去式的文章,所以没有图.但是希望把经验分享出来,可以帮到和我一样爱好XSS的朋友.我个人偏爱富文本XSS,因为很有 ...

  2. Hibernate的一级二级缓存机制配置与测试

    特别感谢http://www.cnblogs.com/xiaoluo501395377/p/3377604.html 在本篇随笔里将会分析一下hibernate的缓存机制,包括一级缓存(session ...

  3. []with[[]]

    [brand@localhost ~]$ echo $name hello hello [brand@localhost ~]$ [$name = "hello"] -bash: ...

  4. MUI - Dialog 提示窗

    Mui基本简介 MUI不依赖任何第三方JS库,压缩后的JS和CSS文件仅有100+K和60+K MUI的开发手册和下载地址 http://dev.dcloud.net.cn/mui/ui/ https ...

  5. mysql语句中有引号的问题解决方案

    在mysql的查询.修改.插入.删除的sql语句里有引号如何处理? 例如: <? $name = "my name is xcxc"; $people = "i'm ...

  6. Mysql的时间和日期

    datetime    占8个字节    可以显示日期同时显示时间  yyyy-mm-dd hh:mm:ss 显示范围  1000-01-01 00:00:00----9999-12-31 23:59 ...

  7. Linux内核总结

    1.文件系统就是数据的存储结构,不要以为你的硬盘存储东西理所当然,没有文件系统,你存的只是0010101101100 2.内存管理是计算机运行时内存的分配和使用. 3.进程管理就是说每次执行一个程序都 ...

  8. php课程---建立一个简单的下拉列表框

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. Python强化训练笔记(二)——元组元素的命名

    对于一个元组如: >>> s1 = ('Jim', 21, 'boy', '5788236@qq.com') 我们要得到该对象的名字,年龄,性别及邮箱的方法为s1[0],s1[1], ...

  10. Android中Service(服务)详解

    http://blog.csdn.net/ryantang03/article/details/7770939 Android中Service(服务)详解 标签: serviceandroidappl ...