等宽格子堆砌 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>
等宽格子堆砌 js的更多相关文章
- css基础之 图片瀑布流布局：用CSS+DIV等宽格子堆砌瀑布流效果 （一）
<!doctype html> <html> <head> <meta charset="UTF-8"/> <title> ...
- 设计一个自动生成棋盘格子的JS小程序
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 格子布局 js
<!doctype html> <html> <head> <meta charset="UTF-8" /> <title&g ...
- JS 、JQ 获取宽高总结 & JS中getBoundingClientRect的作用及兼容方案
1.getBoundingClientRect的作用 getBoundingClientRect用于获取某个html元素相对于视窗的位置集合. 执行 object.getBoundingClien ...
- 移动端宽高适配JS
//定义全局变量 var winWidth = 0; /*窗口宽度*/ var winHeight = 0; /*窗口高度*/ //函数区 //实时获取浏览器窗口大小,当窗口大小变化开始相应操作 fu ...
- JS 获取浏览器和屏幕宽高等信息代码
JS 获取浏览器和屏幕宽高等信息. 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:doc ...
- js获取屏幕（设备）宽高
平常获取设备的宽高无非就那几 <script language="javascript"> var h = ""; h += " 网页可见 ...
- MetaHandler.js：移动端适配各种屏幕
MetaHandler.js !function () { var opt = function() { var ua = navigator.userAgent, android = ua.matc ...
- JS答辩习题
php高中班javascript答辩题目 1 什么是javascript? 答:Javascript是一种专门设计用来增强网页交互性的脚本语言,它也是一种解释型语言. 2 Javascript与C语 ...
随机推荐
- adb怎么判断是否有root权限，并更改system/app内容
一.首先判断root权限: adb root 结果: C:\signapp>adb root restarting adbd as root # 说明有root权限 ,若是adbd cannot ...
- Netsharp快速入门(之8) 基础档案(工作区2 设置商品主列表、规格细列表、商品表单、查询)
作者:秋时 杨昶 时间:2014-02-15 转载须说明出处 3.5.1.1 列表设置 1.选择第一行主列表,点工具-列表方案 2.打开列表方案界面后,在列表项目填入需要用到实体Demo.Arc ...
- POJ2451 Uyuw's Concert(半平面交)
题意就是给你很多个半平面,求半平面交出来的凸包的面积. 半平面交有O(n^2)的算法,就是每次用一个新的半平面去切已有的凸包,更新,这个写起来感觉也不是特别好写. 另外一个O(nlogn)的算法是将半 ...
- POJ 2752 Seek the Name, Seek the Fame （KMP的next函数，求前缀和后缀的匹配长度）
给一个字符串S,求出所有前缀,使得这个前缀也正好是S的后缀.升序输出所有情况前缀的长度.KMP中的next[i]的意义就是:前面长度为i的子串的前缀和后缀的最大匹配长度.明白了next[i],那么这道 ...
- JS中 判断null
以下是不正确的方法: var exp = null; if (exp == null) { alert("is null"); } exp 为 undefined 时,也会得到与 ...
- 借助flexpaper实现word在线预览和打印
为了实现word能够在web上尽量以原始的排版样式展现出来,选择基于activex控件的方式太过于依赖某种浏览器,并且存在可能需要花费金钱购买相应的控件产品:于是借助flexpaper这种flash展 ...
- DevExpress licenses.licx 问题
在DevExpress ( 当然并不范指DevExpress,很多收费软件都是这样的)中,licenses.licx 是用户许可证书文件,当我们使用某些ActiveX(是Microsoft对于一系列策 ...
- php获取网页header信息的4种方法
php获取网页header信息的方法多种多样,就php语言来说,我知道的方法有4种, 下面逐一献上. 方法一:使用get_headers()函数 推荐指数: ★★★★★ get_header方法最简单 ...
- JAVA IO 类库详解
JAVA IO类库详解 一.InputStream类 1.表示字节输入流的所有类的超类,是一个抽象类. 2.类的方法 方法 参数 功能详述 InputStream 构造方法 available 如果用 ...
- [转载] poll()函数
原地址:http://baike.baidu.com/view/2997591.htm poll()函数:这个函数是某些Unix系统提供的用于执行与select()函数同等功能的函数,下面是这个函 ...