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

等宽格子堆砌 js的更多相关文章

  1. css基础之 图片瀑布流布局:用CSS+DIV等宽格子堆砌瀑布流效果 (一)

    <!doctype html> <html> <head> <meta charset="UTF-8"/> <title> ...

  2. 设计一个自动生成棋盘格子的JS小程序

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. 格子布局 js

    <!doctype html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  4. JS 、JQ 获取宽高总结 & JS中getBoundingClientRect的作用及兼容方案

    1.getBoundingClientRect的作用 getBoundingClientRect用于获取某个html元素相对于视窗的位置集合.   执行 object.getBoundingClien ...

  5. 移动端宽高适配JS

    //定义全局变量 var winWidth = 0; /*窗口宽度*/ var winHeight = 0; /*窗口高度*/ //函数区 //实时获取浏览器窗口大小,当窗口大小变化开始相应操作 fu ...

  6. JS 获取浏览器和屏幕宽高等信息代码

    JS 获取浏览器和屏幕宽高等信息. 网页可见区域宽:document.body.clientWidth  网页可见区域高:document.body.clientHeight  网页可见区域宽:doc ...

  7. js获取屏幕(设备)宽高

    平常获取设备的宽高无非就那几 <script language="javascript"> var h = ""; h += " 网页可见 ...

  8. MetaHandler.js:移动端适配各种屏幕

    MetaHandler.js !function () { var opt = function() { var ua = navigator.userAgent, android = ua.matc ...

  9. JS答辩习题

    php高中班javascript答辩题目 1 什么是javascript?  答:Javascript是一种专门设计用来增强网页交互性的脚本语言,它也是一种解释型语言. 2 Javascript与C语 ...

随机推荐

  1. mysql的简单主从复制(ubuntu)

    环境:两台ubuntu 12.04.5 虚拟机    mysql-server-5.5 master (192.168.240.130) slave (192.168.240.129) (1)查看二进 ...

  2. HDU 5763 Another Meaning KMP+DP

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5763 Another Meaning Time Limit: 2000/1000 MS (Java/ ...

  3. 【POJ】【1637】Sightseeing tour

    网络流/最大流 愚人节快乐XD 这题是给一个混合图(既有有向边又有无向边),让你判断是否有欧拉回路…… 我们知道如果一个[连通]图中每个节点都满足[入度=出度]那么就一定有欧拉回路…… 那么每条边都可 ...

  4. winform 如何控制输入法

    在工作中遇到这样一个问题,在系统使用过程中,输入法会变灰导致无法使用输入法输入文字,就好像输入法被禁用了没有启用似的.对此,在这里做个备录 这里文章写出来并不是为了炫耀什么,只是觉得发现些好东西就分享 ...

  5. HDU1056 HangOver

    HangOver Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u   Descript ...

  6. 常用的CSSreset整理

    说道CSSreset,大家又爱又恨,cssreset好处是,覆盖了浏览器的默认样式,使前端攻城狮能更加精确的添加样式,各个浏览器中的界面效果都相同.可是大量的.固定的CSSreset也给网页加载带来一 ...

  7. HTTP persistent connection

    http://en.wikipedia.org/wiki/HTTP_persistent_connection

  8. Delphi的Socket编程步骤

    ClientSocket 和ServerSocket几个重要的属性:   1.client和server都有port属性,需要一致才能互相通信   2.client有Address属性,使用时填写对方 ...

  9. ZOJ3238 Water Ring(计算几何)

    题意:给你一个圆形和很多个矩形,然后要你求圆形的圆周有多少被矩形覆盖. 思路:比赛的时候是有思路的了,不过一直在调别的题,最后剩下30分钟肯定来不及敲.想法是这样的,要是我们可以求出每个矩形覆盖了圆周 ...

  10. 安装微软ASP.NET MVC 4,运行以下的包管理器控制台命令

    (菜鸟,勿喷,有错求指正)Asp.net  新建的类库中安装MVC4  .下面是步骤,1+2:打开程序包管理控制台,3:运行Install-Package Microsoft.AspNet.Mvc - ...