<!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>
分享到：
相关推荐
瀑布流布局，也被称为Masonry布局，是一种网页设计中常见的图片或内容展示方式，它以其独特的视觉效果，如同瀑布般逐级下落的排列形式，给用户带来新颖且吸引人的体验。这种布局常用于图片分享网站、社交媒体和电商...
本资源提供的“目前最流行的瀑布流无限加载代码”适用于HTML5环境，能够很好地适应手机端网站，为移动设备用户提供流畅的浏览体验。瀑布流布局与无限加载的结合，是现代网页设计的一个重要趋势，它能够有效地利用...
标题中的“伪瀑布流”通常是指一种通过模拟瀑布流布局来实现视觉效果的方法，但可能并没有像真正的瀑布流那样实时地根据窗口大小进行动态调整。这种布局常用于电商、图片分享等网站，让用户在有限的屏幕空间内看到更...
瀑布流布局，又称Masonry布局，是一种常见的网页布局方式，尤其在展示图片或者商品时非常流行。这种布局的特点是每个元素（通常是图片）的宽度不固定，但它们的左侧边缘会对齐，形成一种自适应的错落效果，类似于...
瀑布流布局，又称为Pinterest布局，是Android应用中一种常见的展示大量信息的方式，尤其在图片浏览、电商商品展示等场景中十分流行。这种布局模仿了自然瀑布垂直下落的效果，每一项元素根据屏幕宽度自动调整大小和...
瀑布流布局，又称Masonry布局，是一种常见的网页布局方式，尤其在图片展示网站中非常流行。它通过将不同高度的元素以多列的形式排列，使得每一列从上至下依次填充，形成一种“瀑布”般的视觉效果。jQuery，作为一款...
一些流行的jQuery插件，如Isotope、Masonry和Wookmark，提供了简便的方法来实现瀑布流布局。 3. **响应式设计**：瀑布流布局需要考虑不同设备和屏幕尺寸下的适配。使用媒体查询（Media Queries）可以确保布局在手机...
React Native 瀑布流列表是一种流行的前端技术，它允许开发者构建动态、响应式的界面，以展示内容，尤其是图片和媒体元素，以类似瀑布或下落石头的方式排列。这种布局方式在电商、摄影或者社交媒体应用中非常常见，...
瀑布流布局，又称Masonry布局，是一种常见的网页布局方式，尤其在展示图片或者商品时非常流行。这种布局方式的特点是每一列的宽度相等，但高度可以不一致，每个元素（如图片）自适应地填充到列中，形成一种自上而下...
移动端H5瀑布流布局是一种流行的网页布局方式，视觉上呈现出一种像瀑布一样垂直落下的排版。每张图片并不是显示的正正方方的，而是有的长有的短，呈现出一种不规则的形状。但是它们的宽度通常都是相同的。 移动端...
瀑布流布局，又称Masonry布局，是iOS应用中一种常见的展示大量内容的布局方式，尤其在图片、商品展示等场景中十分流行。这种布局模仿了瀑布流动的效果，使得屏幕空间得以充分利用，每行元素的高度不固定，根据内容...
瀑布流布局，又称Masonry布局，是一种常见的网页布局方式，尤其在展示图片或者商品列表时非常流行。这种布局方式的特点是元素（如图片）会像瀑布一样垂直排列，每列的高度不固定，新行的起始位置会根据上一行元素的...
瀑布流布局，也被称为Masonry布局，是一种常用于图片展示的网页设计模式，尤其在社交媒体、电子商务和图像分享网站中非常流行。这种布局方式模仿了真实世界中的瀑布，使得图片在页面上像流水一样自然地排列，每行的...
而在网页或移动应用中，瀑布流（Waterfall Layout）设计则是一种非常流行的照片展示布局，它能够为用户提供连续、无断点的视觉体验，使得浏览照片变得更为流畅和吸引人。 瀑布流设计的核心在于其自适应和灵活的布局...
瀑布流布局，又称Masonry布局，是一种常见的网页和移动应用界面设计方式，尤其在展示图片或者商品信息时非常流行。这种布局方式模仿了瀑布流水的效果，使得内容在屏幕上以不规则的多列形式自上而下排列，每列的高度...
瀑布流布局，也被称为Masonry布局，是一种网页布局方式，常用于图片展示，尤其是像Pinterest这样的社交网络。这种布局的特点是容器内的元素不规则排列，每一列的高度根据内容自适应，形成一种“流水”般的视觉效果。...
在这些项目中，你可能会看到一些流行的Android库被用来辅助实现瀑布流，例如`StaggeredGridLayoutManager`（用于网格布局）、`PagedListAdapter`（用于分页加载）以及`RecyclerRefreshLayout`（用于刷新和加载）。...
瀑布流布局，也被称为Masonry布局，是一种在网页设计中广泛应用的展示元素的方式，尤其在图片展示、电商产品陈列等领域非常流行。这种布局方式模仿了瀑布向下流淌的效果，使得页面中的元素可以自适应地排列，形成一...
瀑布流是今年流行的一种页面布局方式，淘宝哇喔，蘑菇街，点点等都采用了瀑布流布局。花瓣主题集成了日志一键分享功能，对于提升网站流量非常有用。另外petal对于浏览器的兼容也是不错的，支持目前所有主流浏览器，...
瀑布流布局，又称Masonry布局，是一种常见的网页布局方式，尤其在展示图片或者商品时非常流行。这种布局方式的特点是，每一列的元素顶部对齐，就像水从高处流下形成错落有致的效果。在JavaScript和jQuery的帮助下，...