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

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

#box ul li {
   width: 180px;
   margin: 10px 9px;
   border: #666 1px solid;
}
</style>
<script>
function rnd(n,m){
   return parseInt(Math.random() * (m - n) + n);
}
function createLi(){
   var oLi = document.createElement('li');
   oLi.style.height = rnd(100,400) + '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 < 20; i++){
         var oLi = createLi();
         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 oscrollH = document.documentElement.scrollTop || document.body.scrollTop;
      var clientH = document.documentElement.clientHeight;
      var oBoxH = oBox.scrollHeight;
      if(oscrollH + clientH >= oBoxH - 300){
         appendLi();
      }  
   }
}
</script>
</head>

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

js-小效果-瀑布流的更多相关文章

  1. JS实现动态瀑布流及放大切换图片效果(js案例)

    整理了一下当时学js写的一些案例,再次体验了一把用原生JS实现动态瀑布流效果的乐趣,现在把它整理出来,需要的小伙伴可以参考一下. 该案例主要是用HTML+CSS控制样式,通过JS实现全局瀑布流以及点击 ...

  2. js 实现图片瀑布流效果，可更改配置参数 带完整版解析代码[waterFall.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS实现图片瀑布流效果 页面需求 1 ...

  3. 原生 JS 实现一个瀑布流插件

    更好的阅读体验,点击 原文地址 瀑布流布局中的图片有一个核心特点 -- 等宽不定等高,瀑布流布局在国内网网站都有一定规模的使用,比如pinterest.花瓣网等等.那么接下来就基于这个特点开始瀑布流探 ...

  4. 原生js 实现的瀑布流

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

  5. jquery/原生js/css3 实现瀑布流以及下拉底部加载

    思路: style: <style type="text/css"> body,html{ margin:; padding:; } #container{ posit ...

  6. JS原生效果瀑布流布局的实现(一)

    JS原生效果 实现: HTML页面布局: <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu ...

  7. js小效果-轮播图

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  8. js小效果：返回顶部 scrollTop 。 滚屏：animate

    返回顶部: (scroll 滚屏事件,如果超出第一屏,显示返回顶部的按钮) <div id="gotop" onclick="javascript:scroll(0 ...

  9. js小效果-全选

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  10. js小效果-简易计算器

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

随机推荐

  1. ACM训练计划建议（写给本校acmer，欢迎围观和指正）

    ACM训练计划建议 From:freecode#  Date:2015/5/20 前言: 老师要我们整理一份训练计划给下一届的学弟学妹们,整理出来了,费了不少笔墨,就也将它放到博客园上供大家参考. 菜 ...

  2. oracle相关环境变量配置

    ORACLE_HOME:D:\Program File\oracle\product\10.2.0\db_1 ORACLE_SID:orcl Path中增加:D:\ProgramFile\oracle ...

  3. Web分布式架构演变过程

    1 单台服务器 2 应用服务器与数据库服务器 文件服务器分开 3 数据库 缓存  读写分离  实时写 非实时写 4 应用服务器集群  需要再配一台”负载均衡调度器“,nginx 5 数据库拆封 主库 ...

  4. 工厂模式/factory模式/创建型模式

    工厂模式 普通工厂模式 原本需要new出来的对象,通过一个类的方法去搞定,Factory.build(parameter),类似这种. public interface Sender { public ...

  5. 回忆一次面试Android研发的问题

    有NDK开发JNI程序经验优先 intent   intentfileter 阿里云 线程,异步 1.图片缓冲2.解压3.获取搜索记录 4.在安卓开发过程中用到那些框架

  6. 轻松搞定javascript预解析机制（搞定后，一切有关变态面试题都是浮云~~）

    hey,guys!我们一起总结一下JS预解析吧! 首先,我们得搞清楚JS预解析和JS逐行执行的关系.其实它们两并不冲突,一个例子轻松理解它们的关系: 你去酒店吃饭,吃饭前你得看下菜谱,点下菜(JS预解 ...

  7. hdu 4114（状压dp)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4114 思路:首先是floyd预处理出任意两点之间的最短距离.dp[state1][state2][u] ...

  8. 【转】【异常处理】Incorrect string value: '\xF0\x90\x8D\x83...' for column... Emoji表情字符过滤的Java实现

    http://blog.csdn.net/shootyou/article/details/44852639 Emoji表情字符现在在APP已经广泛支持了.但是MySQL的UTF8编码对Emoji字符 ...

  9. JMeter常用字符串相关函数

    JMeter的惯用函数使用-字符串相关 主要的函数如下:1.将字符串转为大写或小写: ${__lowercase(Hello,)}  ${__uppercase(Hello,)}2.生成字符串:  _ ...

  10. poj3616 LIS变形

    题目链接:http://poj.org/problem?id=3616 题意:给出m组数据a,b,c代表在第a分钟到第b分钟产生c个效益,问最大产生多少效益(区间不能重叠,每次工作完必须歇息R分钟) ...