To be or not to be.That is a question!

---源于莎士比亚的《哈姆雷特》

导航

等宽格子堆砌 js 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{padding:0;margin:0;}
    #wrap{position:relative;zoom:1;margin:0px auto;}
    #wrap li{width:250px;float:left;list-style:none;}
    .boxCont{position:relative;margin:15px;border:1px solid #ccc;background:#eee;
        background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
        background: -webkit-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
        background: -moz-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
        background: -o-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
        -webkit-border-radius: 60px / 5px;
        -moz-border-radius: 60px / 5px;
        border-radius:60px / 5px;
        -webkit-box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;
        -moz-box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;
        box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;
    }
    .boxCont:before{
        content: '';
        width: 50px;
        height: 50px;
        top:0; right:0;
        position:absolute;
        display: inline-block;
        z-index:-1;
        -webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
        box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
        -webkit-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
        -moz-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
        -o-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
        transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
    }
    .boxCont:after{
        content: '';
        width: 100px;
        height: 100px;
        top:0; left:0;
        position:absolute;
        z-index:-1;
        display: inline-block;
        -webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
        box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
        -webkit-transform: rotate(2deg) translate(20px,25px) skew(20deg);
        -moz-transform: rotate(2deg) translate(20px,25px) skew(20deg);
        -o-transform: rotate(2deg) translate(20px,25px) skew(20deg);
        transform: rotate(2deg) translate(20px,25px) skew(20deg);
    }
    </style>
</head>
<body>
    <div id="wrap"></div>
    <script type="text/javascript">
    ;(function(){
        var waterFlow={
            $:function(el){
                return typeof el==="string" ? document.getElementById(el) : el;
            },
            getArraykey:function(s,k){
                for(i in s){
                    if (s[i]==k) {
                        return i;
                    };
                }
            },
            sort:function(el){
                var h=[],
                    box=el.getElementsByTagName("li"),
                    minH=box[0].offsetHeight,
                    boxW=box[0].offsetWidth,
                    n=document.documentElement.offsetWidth/boxW | 0,
　　　　　　　　　　　 i=0;
                el.style.width=n*boxW+"px";
                for (; i < box.length; i++) {
                    boxH=box[i].offsetHeight;
                    if (i<n) {
                        h[i]=boxH;
                        box[i].style.position="";
                    }else{
                        minH=Math.min.apply({},h);
                        minKey=this.getArraykey(h,minH);
                        h[minKey]+=boxH;
                        box[i].style.position="absolute";
                        box[i].style.top=minH+"px";
                        box[i].style.left=(minKey*boxW)+"px";
                    };
                };
            },
            init:function(){
                var self=this;
                window.onload = window.onresize = function() {
                var pin = '',i=0;
                for(; i < 30; i++) {
                    height = Math.floor(Math.random()*200 + 200);
                    pin += '<li><div class="boxCont" style="height:' + height + 'px;"></div></li>';
                };
                self.$("wrap").innerHTML = pin;
                    self.sort(self.$("wrap"));
                };
            }
        }
        waterFlow.init();
    })()
    </script>
</body>
</html>

 

posted on 2013-06-21 16:46  Ijavascript  阅读(306)  评论(1)  编辑  收藏  举报