等宽格子堆砌 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语 ...

随机推荐

向Array中添加二分插入排序
二分插入排序思路先在有序区通过二分查找的方法找到移动元素的起始位置,然后通过这个起始位置将后面所有的元素后移. 二分插入排序实现 Function.prototype.method = functi ...
我教女朋友学编程Html系列(6)—Html常用表单控件
做过网页的人都知道,html表单控件十分重要.基本上我们注册会员.登录用户,都需要填写用户名.密码,那些框框都是表单控件. 本来今天就想写一些常用的html表单控件,于是开始搜资料,找到了一个网页,作 ...
【VS2012】项目文件夹管理
项目中添加文件夹 " 项目"显示所有文件在"显示所有文件"的情况下,可以创建文件件 "新建文件夹"需要添加到物理路径中时,可以选择&quo ...
【BZOJ】【1036】树的统计
嗯这题是一道对树进行动态修改&查询的经典题目,可以拿来练习树链剖分~ 啊对于这种动态修改&查询的题目,我们最喜闻乐见的就是在一个序列上去做了,毕竟可以直接套各种数据结构模版啊,比如线段 ...
Winform跨线程操作界面的策略
BeginInvoke(new ThreadStart(() => toolStripButton1.Text = "aaa")); 1.非跨线程操作和部分跨线程get不会引 ...
Leetcode#90 Subsets II
原题地址跟Subsets(参见这篇文章)类似. 但因为有重复元素,所以要考虑去重问题. 什么情况下会出现重复呢?比如S = {5, 5, 5},如果要选1个5,一共有C(3,1)=3种选法,即100 ...
matrix_last_acm_4
2013 ACM-ICPC吉林通化全国邀请赛 A http://acm.hust.edu.cn/vjudge/contest/view.action?cid=97654#problem/A 题意:输入 ...
YTKNetwork
YTKNetwork 是猿题库 iOS 研发团队基于 AFNetworking 封装的 iOS 网络库,其实现了一套 High Level 的 API,提供了更高层次的网络访问抽象. YTKNetwo ...
安装hbase-0.98.9-hadoop2
1. download http://124.202.164.13/files/1244000005C563FC/www.eu.apache.org/dist/hbase/stable/hbase-0 ...
ECMAScript5下Array的方法
声明:ECMAScript不会兼容IE8及以下版本IE浏览器. 一.迭代方法注:这些迭代方法不会影响数组的值. 每个方法都有两个参数: array.方法(执行函数体,当前作用域(比如this,这个可 ...

等宽格子堆砌 js

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

随机推荐

热门专题