zoukankan      html  css  js  c++  java
  • js瀑布流

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

    #box ul {
         300px;
        height: auto;
        float:left;
        margin-right: 20px;
        border: #000 1px solid;
    }

    #box ul li {
         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>

  • 相关阅读:
    Jmeter+Jenkins持续集成(三、集成到Jenkins)
    Jmeter+Jenkins持续集成(一、环境准备)
    Git----基础常用的命令总结
    -第5章 多级菜单
    -第4章 变幻菜单
    -第3章 jQuery方法实现下拉菜单显示和隐藏
    -第2章 JS方法实现下拉菜单显示和隐藏
    DIV+CSS+PS实现背景图的三层嵌套以及背景图的合并
    -第1章 HTMLCSS方法实现下拉菜单
    前端常用效果-目录
  • 原文地址:https://www.cnblogs.com/guolimin/p/6099455.html
Copyright © 2011-2022 走看看