瀑布流布局代码一例
发布时间:2023-08-25 07:33:19
标签:瀑布流,布局
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>瀑布流布局代码</title>
<script type="text/javascript" src="js/jquery.js"></script>
<style type="text/css">
body, div, img, h1, h2, h3, h4, h5, h6 { padding:0px; margin:0px; }
img { border:none; }
.wrapper { width:960px; margin:0 auto; }
#con1_1 { position:relative; }
#con1_1 .product_list { position:absolute; left:0px; top:0px; padding:10px; background:#eee; }
.product_list img { width:200px; display:block; }
.product_list h2 { padding:5px 0px; font-size:12px; text-align:center; color:#333; }
</style>
</head>
<body>
<div class="wrapper">
<h3>这是正文的标题部分</h3>
<div id="con1_1">
<div class="product_list"> <a href="#"><img src="images/img1.jpg"></a>
<h2>图片高度</h2>
</div>
<div class="product_list"> <a href="#"><img src="images/img2.jpg"></a>
<h2>图片高度</h2>
</div>
<div class="product_list"> <a href="#"><img src="images/img3.jpg"></a>
<h2>图片高度</h2>
</div>
<div class="product_list"> <a href="#"><img src="images/img4.jpg"></a>
<h2>图片高度</h2>
</div>
<div class="product_list"> <a href="#"><img src="images/img5.jpg"></a>
<h2>图片高度</h2>
</div>
<div class="product_list"> <a href="#"><img src="images/img6.jpg"></a>
<h2>图片高度</h2>
</div>
<div class="product_list"> <a href="#"><img src="images/img7.jpg"></a>
<h2>图片高度</h2>
</div>
<div class="product_list"> <a href="#"><img src="images/img8.jpg"></a>
<h2>图片高度</h2>
</div>
</div>
<h3>这行文字的位置首先要用js去计算下上面内容的高度了</h3>
</div>
</body>
<script type="text/javascript">
/*
原理:1.把所有的li的高度值放到数组里面
2.第一行的top都为0
3.计算高度值最小的值是哪个li
4.把接下来的li放到那个li的下面
*/
var margin = 10;//设置间距
var li=$(".product_list");//区块名称
var li_W = li[0].offsetWidth+margin;//取区块的实际宽度
function liuxiaofan(){
var h=[];//记录区块高度的数组
var n = 960/li_W|0;
for(var i = 0;i < li.length;i++) {
li_H = li[i].offsetHeight;//获取每个li的高度
if(i < n) {//n是一行最多的li,所以小于n就是第一行了
max_H =Math.max.apply(null,h);
h[i]=li_H;//把每个li放到数组里面
li.eq(i).css("top",0);//第一行的Li的top值为0
li.eq(i).css("left",i * li_W);//第i个li的左坐标就是i*li的宽度
}
else{
min_H =Math.min.apply(null,h) ;//取得数组中的最小值,区块中高度值最小的那个
minKey = getarraykey(h, min_H);//最小的值对应的指针
h[minKey] += li_H+margin ;//加上新高度后更新高度值
li.eq(i).css("top",min_H+margin);//先得到高度最小的Li,然后把接下来的li放到它的下面
li.eq(i).css("left",minKey * li_W); //第i个li的左坐标就是i*li的宽度
}
$("h2").eq(i).text("高度:"+li_H);//把区块高度值写入对应的区块H2标题里面
}
max =Math.max.apply(null,h) ;
$("#con1_1").css("height",max);
}
/* 使用for in运算返回数组中某一值的对应项数(比如算出最小的高度值是数组里面的第几个) */
function getarraykey(s, v) {for(k in s) {if(s[k] == v) {return k;}}}
/*这里一定要用onload,因为图片不加载完就不知道高度值*/
window.onload = function() {liuxiaofan();};
window.onresize = function() {liuxiaofan();};
$(function(){
$(".product_list").hover(function(){
$(this).css("background-color","#ddd");
},function() {
$(this).css("background-color","#eee");
});
});
</script>
</html>
0
投稿
猜你喜欢
- IE(internet explorer)公司:微软(MicroSoft)布局引擎:Trident(也做MSHTML)注:解析渲染
- 如何发送一个XMLHttpRequest的检索的特定部分HTML标题数据。<html> <head> <tit
- /* 功能: 通用分页存储过程 参数: @PK varchar(50), 主键,用来排序的单一字段,空的话,
- 问题背景:日常对Sql Server 2005关系数据库进行操作时,有时对数据库(如:Sharepoint网站配置数据库名Sharepoin
- this指向当前作用域的对象,如果找不到,往上一层找,直到window。this 关键字很好用,很灵活,正因为很灵活,所以一不小心你就会掉进
- 本文实例为大家分享了opencv实现图像旋转效果的具体代码,供大家参考,具体内容如下图像旋转:在opencv中首先根据旋转角度和中心获取旋转
- 随着互联网的快速发展和数据交换的广泛应用,各种数据格式的处理成为软件开发中的关键问题。JSON 作为一种通用的数据交换格式,在各种应用场景中
- 在官网下载源码包:https://www.php.net/downloads.php步骤:1、解压命令:tar -xjvf php.tar.
- 简化了一下 YUI3 中的沙箱实现 方式:if (typeof Sandbox === 'undefined' || !Sa
- 只能输入中文/** * 22.验证汉字 * 表达式 ^[\u4e00-\u9fa5]{0,}$ * 描述 只能汉字 * 匹配的例子 清清月儿
- 由于计算机软件的非法复制,通信的泄密、数据安全受到威胁。一般为了安全,会要求将数据库名称、密码等信息进行加密。所以加密在开发过程中是经常使用
- 为了防止网络上日益猖獗的垃圾广告和灌水评论,大多数网站在信息发布的时候要求输入验证码。图片、文字、字母甚至还有计算题。验证码图片里的信息东颠
- 大家都知道,数据库的安全性是很重要的,它直接影响到数据库的广泛应用。用户可以采用任意一种方法来保护数据库应用程序,也可以将几种方法结合起来使
- 这里是一个基于GMap2和XML的小例子,数据存在XML文件中 ,这是最简单的模式,却相当地有用。实例的网址是: http://sunjia
- 本文实例讲述了PHP共享内存使用与信号控制。分享给大家供大家参考,具体如下:共享内存共享内存的使用主要是为了能够在同一台机器不同的进程中共享
- 本文实例讲述了php生成curl命令行的方法。分享给大家供大家参考,具体如下:示例:curl "http://localhost/
- 前言昨天因为小程序功能要获取小程序程序码,看了微信文档爬了好多坑。(留一下记录以防后面被坑)操作因为我获取到了微信那里的图片的图片流一直不知
- java JSP开发之Spring中Bean的使用在传统的Java应用中,bean的生命周期很简单。使用Java关键字new进行bean实例
- PHP的类是单一继承模式,也就是每个类只能继承一个父类(基类)。但有时需要引入更多通用(共用)的方法,同时这些方法又不适合集成到基类。那么这
- 前言对于PHP大家一定不陌生,但你知道PHP在CTF中是如何考察的吗,本文给大家带来的是通过PHP特性来进行CTF比赛中解题出题的知识,会介