瀑布流布局代码一例
<!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>
相关推荐
-
瀑布流布局代码一例
复制代码 代码如下: <!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=&qu
-
JavaScript瀑布流布局实现代码
先说一下什么是瀑布流布局. 就是一堆等宽不等高的数据块组成的页面,如图: 现在好多网站都采用这种瀑布流布局,如蘑菇街.美丽说等等. 首先要实现它就要明白它是怎样排列的. 每一行的列数都是根据图片的宽度和页面的宽度算比例算下来的.. 第一行就是按顺序排列,其他的数据块都是在每一列中挑选出最低的那一列依次排进去的. 首先实现框架. <div id = "main"> <div class = "box"> <div class = &quo
-
一行JavaScript代码如何实现瀑布流布局
写在前面 一行 JavaScript 代码究竟可以完成什么布局?今天我们就来用一行 JavaScript 代码完成经典布局的一种,瀑布流布局. 所谓的瀑布流布局就是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部. 瀑布流的特点: 琳琅满目: 整版以图片为主,大小不一的图片按照一定的规律排列. 唯美: 图片的风格以唯美的图片为主. 操作简单: 在浏览网站的时候,只需要轻轻滑动一下鼠标滚轮,一切的美妙的图片精彩便可呈现在你
-
uniapp小程序实现瀑布流布局的思路与代码
一.前言 现在写瀑布流算不算是炒冷饭啊? 我不管, 我就要写,谁也别想拦我. 瀑布流应该算是很常见的一种布局方法了,大致的思路也很好理解, 但是在小程序里面确有另外需要考虑的几个问题. 问题1:uniapp是基于Vue的,所以不好直接操作DOM. 问题2:uniapp基于Vue,但也做了一些修改,所以不好拿ref来操作 二.先说思路 为了保证文章的长度,以及有些小伙伴对瀑布流的基本思路不是很了解,所以先讲讲瀑布流的思路,先看下图. 可以看到,商品的图片高度是不一致的,再加上商品标题的行数不一致,
-
AJAX实现瀑布流布局
瀑布流是当前一种比较流行的网站界面布局方式,参差不齐的多栏布局以及到达底部自动加载的方式,使网站在视觉和用户体验上都能得到较大的提升.最早使用此布局的是国外的图片网站Pinterest,之后国内的一些图片网站也开始使用瀑布流布局,包括和Pinterest类似的花瓣网.图片社区lofter.美丽说.蘑菇街等等. 瀑布流在布局上对于大多数人来说应该是很简单的,比较只有几列而已.瀑布流最主要的还是数据的异步加载. 首先说一下这次实例所用的瀑布流式方法.瀑布流布局实现的方法很多,具体可以自行百度,此处不
-
基于jquery实现瀑布流布局
本文实例为大家介绍了基于jquery实现瀑布流布局的关键代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: 使用jquery-1.8.3.min.js,waterfall.js代码如下: $( window ).load( function(e){ waterfall(); var dataInt = { 'data': [{ 'src': '1.jpg' },{ 'src': '2.jpg' },{ 'src': '3.jpg' },{ 'src': '4.jpg' }]}; $(
-
JS实现瀑布流布局
本文实例为大家分享了JS实现瀑布流布局展示的具体代码,供大家参考,具体内容如下 html部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>瀑布流布局</title> <script src="wallpoll.js"></script> <link r
-
纯js实现瀑布流布局及ajax动态新增数据
本文用纯js代码手写一个瀑布流网页效果,初步实现一个基本的瀑布流布局,以及滚动到底部后模拟ajax数据加载新图片功能. 缺点: 1. 程序不是响应式,不能实时调整页面宽度: 2. 程序中当新增ajax模拟数据图片后,是将整个页面的所有图片都重新定位一次. 3. 程序是等所有图片加载完成后再读取图片的尺寸,实际中肯定不能这样做. 4. 实际项目中,应该由后台程序给出图片尺寸值,在js代码中直接使用图片的width属性. 本程序思路: html结构: <body> <div id="
-
javascript瀑布流布局实现方法详解
本文实例讲述了javascript瀑布流布局实现方法.分享给大家供大家参考,具体如下: html结构: <div id="waterfall"> <div class="mod-box"> <div class="mod-img">...</div> </div> <div class="mod-box"> <div class="mod-
-
Ionic3实现图片瀑布流布局
瀑布流布局是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部. 瀑布流布局一般使用在网页中,在移动端用的比较少但是也不可缺.下面就介绍一下如何在ionic3中使用瀑布流布局. 首先创建一个项目,这里不多做介绍.我们用about这个模块来进行瀑布流的开发. 这里先介绍一下实现的流程: 我们先要定义一个container,在container中存在有多个box,box里面放置图片. 1.首先获取container中的所有bo