常用网页特效-瀑布流布局（开源）

来源：互联网发布：域名注册检测工具编辑：程序博客网时间：2024/06/05 15:07

<span style="font-family: Arial, Helvetica, sans-serif;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></span>

<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"><head><title>瀑布流无限加载</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="description" content="" /><meta name="keywords" content="" /><style type="text/css">    body, ul, li { margin:0;padding:0;list-style-type:none;}    #main {position:relative;margin:5px;width:90%;}    #main ul li {position:absolute;border:1px solid #CCCCCC;text-align:center;padding:10px;left:0;top:0;}    #main ul li img {width:237px;display:block;}</style></head>    <body>        <div id="main">            <ul id="m">                <li><img src="images/20.jpg" /></li>                <li><img src="images/4.jpg" /></li>                <li><img src="images/9.jpg" /></li>                <li><img src="images/7.jpg" /></li>                <li><img src="images/6.jpg" /></li>                <li><img src="images/14.jpg" /></li>                <li><img src="images/22.jpg" /></li>                <li><img src="images/18.jpg" /></li>                <li><img src="images/20.jpg" /></li>                <li><img src="images/13.jpg" /></li>                <li><img src="images/15.jpg" /></li>                <li><img src="images/9.jpg" /></li>                <li><img src="images/2.jpg" /></li>                <li><img src="images/4.jpg" /></li>                <li><img src="images/7.jpg" /></li>                <li><img src="images/3.jpg" /></li>            </ul>        </div>    </body></html><script type="text/javascript">    function waterFall() {        var margin = 10; // 调置列表间距        var lis = document.getElementsByTagName('li'); // 获取页面上所有的列表        var li_w = lis[0].offsetWidth + margin; // 获取列宽度        var n = Math.floor(document.documentElement.offsetWidth / li_w); // 计算出每屏最多显示多少列        var h = []; // 定义数组记录每列高度        for(var i=0; i<lis.length; i++) {            var li_h = lis[i].offsetHeight; // 记录每个列表的高度            if(i < n) {                h[i] = li_h; // 存储列高度                lis[i].style.top = 0;                lis[i].style.left = i * li_w + 'px';            } else {                var min_h = h[0];                var min_i = 0;                for(var j=0; j<h.length; j++) {                    if(h[j] < min_h) {                        min_h = h[j];                        min_i = j;                    }                }                h[min_i] += li_h + margin;                lis[i].style.top = min_h + margin + 'px';                lis[i].style.left = min_i * li_w + 'px';            }        }    }    var msg = document.getElementById('msg');    var m = document.getElementById('m');    window.onload = waterFall;    window.onscroll = function () {        if(document.documentElement.scrollHeight - document.documentElement.scrollTop - document.documentElement.clientHeight - 500 < 0) {            for(var i=0; i<5; i++) {                var liObj = document.createElement('li');                var imgObj = document.createElement('img');                imgObj.src = 'Images/' + (Math.floor(Math.random() * 21) + 1) + '.jpg';                liObj.appendChild(imgObj);                m.appendChild(liObj);                waterFall();            }        }    }</script>

0 0