猫叔：Fighting！！！

4列——瀑布流布局

Demo：

JS Bin

 

<!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  庄丶大虾  阅读(760)  评论(0)  编辑  收藏  举报