<!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>