4列——瀑布流布局

Demo：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="anchor" content="who care?" />
<title></title>
<style type="text/css">
     #main{width:756px;margin:0 auto;}
     .pin{float:left;padding:15px 0 0 15px;}
     .box{margin-bottom:15px;padding:5px;border:1px solid #ccc;}
     .box img{width:162px;}
</style>
<script type="text/javascript">
    window.onload=function(){
        var oData = {'aData':[{'src':'http://image142-c.poco.cn/mypoco/myphoto/20130524/11/17362751320130524110321053.jpg'},{'src':'http://image142-c.poco.cn/mypoco/myphoto/20130524/11/17362751320130524110439099.jpg'},{'src':'http://image142-c.poco.cn/mypoco/myphoto/20130524/11/17362751320130524110408061.jpg'},{'src':'http://image142-c.poco.cn/mypoco/myphoto/20130524/11/17362751320130524110426042.jpg'}]};
        waterFall(oData.aData);
    };


    function waterFall(arrData){
        window.onscroll = function(){
            var main = document.getElementById('main'),
            aPin = getClassObj(main,'pin'),
            minH = getMinH(aPin),
            minIndex = getIndex(aPin,minH);
            if(checkH(aPin[minIndex])){
                for (var i = 0; i < arrData.length; i++) {
                    var oBox = document.createElement('div'),
                    oImg = document.createElement('img');
                    oBox.className = 'box';
                    oImg.src = arrData[i].src;
                    oBox.appendChild(oImg);
                    aPin[minIndex].appendChild(oBox);
                }
            }
        };
    }

    function getClassObj(parent,className){
        var obj = parent.getElementsByTagName('*'), arr = [], i;
        for (i = 0; i < obj.length; i++) {
            if(obj[i].className == className){ arr.push(obj[i]); }
        }
        return arr;
    };

    function getMinH(pin){
        var colH = [], i;
        for (i = 0; i < 4; i++) { colH[i] = pin[i].scrollHeight; }
        return Math.min.apply(null,colH);
    };

    function checkH(minPin){
        var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
        return (minPin.scrollHeight-scrollTop < 400)?true:false;
    }

    function getIndex(arr,minH){
        for(var i in arr){ if(arr[i].scrollHeight == minH)return i; }
    }
</script>
</head>
<body>
  <div id="main">
    <div class="pin">
      <div class="box">
        <img src="http://image142-c.poco.cn/mypoco/myphoto/20130524/11/17362751320130524110426042.jpg" alt=""/>
      </div>
    </div>
    <div class="pin">
      <div class="box">
        <img src="http://image142-c.poco.cn/mypoco/myphoto/20130524/11/17362751320130524110439099.jpg" alt=""/>
      </div>
    </div>
    <div class="pin">
      <div class="box">
        <img src="http://image142-c.poco.cn/mypoco/myphoto/20130524/11/17362751320130524110408061.jpg" alt=""/>
      </div>
    </div>
    <div class="pin">
      <div class="box">
        <img src="http://image142-c.poco.cn/mypoco/myphoto/20130524/11/17362751320130524110321053.jpg" alt=""/>
      </div>
    </div>
  </div>
</body>
</html>

View Code

posted @ 2013-05-24 15:14 庄丶大虾阅读(763) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· [AI/GPT/综述] AI Agent的设计模式综述

庄丶大虾

坚韧.勇敢.爱

4列——瀑布流布局

搜索

我的标签

阅读排行榜

最新评论