<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=gbk">
<title>等宽格子堆砌</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>
<ul id="wrap"></ul>
<div id='_div'>Copyright 2003-2012</div>
</body>
<script type="text/javascript">
var $id = function(o){return document.getElementById(o) || o};
function sort(el){
var h = [];
var box = el.getElementsByTagName("li");
var minH = box[0].offsetHeight,
boxW = box[0].offsetWidth,
boxH,
n = document.documentElement.offsetWidth / boxW | 0; //计算页面能排下多少Pin
el.style.width = n * boxW + "px";
for(var i = 0; i < box.length; i++) {
boxh = box[i].offsetHeight; //获取每个Pin的高度
if(i < n) { //第一行Pin以浮动排列，不需绝对定位
h[i] = boxh;
box[i].style.position = '';
} else {
minH = Math.min.apply({},h); //取得各列累计高度最低的一列
minKey = getarraykey(h, minH);
h[minKey] += boxh ; //加上新高度后更新高度值
box[i].style.position = 'absolute';
box[i].style.top = minH + 'px';
box[i].style.left = (minKey * boxW) + 'px';
}
}
};
/* 返回数组中某一值的对应项数 */
function getarraykey(s, v) {
for(k in s) {
if(s[k] == v) {
return k;
}
}
};
/* 随机创建Pin */
var pin = '';
for(i = 0; i < 30; i++) {
height = Math.floor(Math.random()*200 + 200);
pin += '<li><div class="boxCont" style="height:' + height + 'px;"></div></li>';
};
$id("wrap").innerHTML = pin;
window.onload = window.onresize = function() {
sort($id("wrap"));
};
</script>
</html>
分享到：
相关推荐
通过鼠标滚动图片无限加载的类似瀑布的效果的图片展示。用户可以无限浏览图片或内容无限加载瀑布流效果
目前最流行的瀑布流无限加载代码，非常适合各种图片站，手机端网站,还可引入json数据
jquery 瀑布流实例最流行瀑布流图片展示
jquery+div最流行瀑布流图片展示效果下载
瀑布流是今年流行的一种页面布局方式，淘宝哇喔，蘑菇街，点点等都采用了瀑布流布局。花瓣主题集成了日志一键分享功能，对于提升网站流量非常有用。另外petal对于浏览器的兼容也是不错的，支持目前所有主流浏览器，...
基于jsp,JavaScript的瀑布流技术,目前比较流行的一种图片展示效果名为瀑布流，有很多的知名网站在应用这个功能，所以今天抽空实现了一下jsp版本瀑布流的功能，可以去我的博客肯看
php实现的瀑布流，研究了一下流行的瀑布流，大多的列子都是用js直接做的瀑布流，数据是死的，所以自己改了一下一个瀑布流的例子，能连接数据库读取新数据，可以滚动无限加载 ！
研究了一下流行的瀑布流，大多的列子都是用js直接做的瀑布流，所以自己改了一下瀑布流的例子，能连接数据库读取数据，可以滚动无限加载 ！
jquery masonry与infinitescroll两款瀑布流插件制作当下最流行的瀑布流图片展示实例，通过鼠标滚动图片无限加载的类似瀑布的效果的图片展示。用户可以无限浏览图片或内容无限加载瀑布流效果
很给力的 流行的网站瀑布流布局 IE7 火狐 谷歌 测试通过
Wookmark jQuery plugin 是一个用来实现现在很流行的瀑布流的网页布局效果的 jQuery 插件。
JQuery wookmark 瀑布流代码实例，现在很流行的一种网页布局效果，瀑布流，随意、洒脱，个性十足，一种代表时尚潮流的网页设计风格。
瀑布流是一种比较流行的展示型效果。适用于内容区比较多的单页面，目前很多图片展示型页面都普遍用了这个效果。今天和大家分享下原生JS实现的瀑布流。希望共同学习交流。
这是一个很流行的web布局实例--瀑布流布局,仿谷歌图片的布局样式,此实例自带25张素材图片,只需将极少部分代码与数据库搭接即可,但本实例也已模仿有数据的样式,滚动会随机加载图片
现在很流行瀑布流布局，现在jquery有现成的布局插件用以实现瀑布流，确实方便多了，但是有不少朋友对这个插件并不知道怎么用，或许通过本代码你会学会如何使用它。这个代码是由网上的代码修改的，对原作者的思路表示...
现在很流行瀑布流布局，现在jquery有现成的布局插件用以实现瀑布流，确实方便多了，但是有不少朋友对这个插件并不知道怎么用，或许通过本代码你会学会如何使用它。这个代码是由网上的代码修改的，对原作者的思路表示...
瀑布流，又称瀑布流式布局。瀑布流布局是一种新型的布局方式，可以将大小不一的图片完整的显示在页面上，并且在杂乱的布局中保持着一定的美感。它是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着...
目前最流行的瀑布流布局插件,支持异步加载,图片延迟加载
‘研究了一下流行的瀑布流，大多的列子都是用js直接做的瀑布流，数据是死的，所以自己改了一下一个瀑布流的例子，能连接数据库读取新数据，可以滚动无限加载 ！’ 旧资源中有许多人觉得代码没有连接数据库，因此特别...
瀑布流模版，网上非常流行的一个模板，能够快速搭建一个html模板