<!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. 算法系列：CSAPP 推荐

    转载自:https://book.douban.com/review/6093947/ 如果你觉得这本书过于厚重担心看不下来的话,不妨跟着coursera的Hardware/Software Inte ...

  2. 杂物 python (一)

    python 是一门语言,有各种不同的实现.CPython 即用c语言实现Python及其解释器.

  3. 笔记本win7共享WIFI

    创建无线网络 (1)netsh wlan set hostednetwork mode=allow ssid=网络名 key=密码 启动承载网络(2)netsh wlan start hostedne ...

  4. x264中I,P，B帧和PTS，DTS的关系

    转自:http://www.cppblog.com/tx7do/archive/2013/01/30/197633.html 基本概念: I frame :帧内编码帧 又称intra picture, ...

  5. Debian下安装vim

    问题描述:安装完系统以后,刚要打算开始写程序,发现,vim还没有装,用su -切换到root后 直接运行apt-get install vim,提示插入disc源,然后回车,陷入无法解决的状态. 上网 ...

  6. AIX RAC ORA-27504 ORA-27300 ORA-27301 ORA-27302 ORA-27303

    操作系统:AIX6.1  数据库:Oracle10.2.0.5 RAC 2个节点.其中一个节点正常,另外一个节点的instance的状态是offline的,手工去启动的时候报错: ORA: IPC e ...

  7. [Java] arraycopy 数组复制(转)

    public class ArraycopyTest {     public static void main(String[] args)     {         //静态初始化两个长度不同的 ...

  8. 外键为','(逗号)拼接ID，连接查询外键表ID

    select distinct pipeId=substring(a.PipeIn,b.number,charindex(',',a.PipeIn+',',b.number)-b.number) fr ...

  9. WebView中实现文件下载功能

      WebView控制调用相应的WEB页面进行展示.当碰到页面有下载链接的时候,点击上去是一点反应都没有的.原来是因为WebView默认没有开启文件下载的功能,如果要实现文件下载的功能,需要设置Web ...

  10. LR连接oracle时出现：SQLState=28000[Oracle][ODBC][Ora]ORA-01017:invalid username/password;logon denied

    出现的现象: