Html - 瀑布流
瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格。
waterwall.js
$(function(){
WaterWall("main","box");
Add_WaterWall_ScrollEvent("main","box");
})
function WaterWall(Id_name,Class_name)
{
var Box_Array = $("#"+ Id_name + ">." + Class_name); //获取所有的Box对象数组
]).innerWidth(); //获取Box的宽度.一定要包含Padding的数值
var Cols = Math.floor($(document).width() / Box_Width);
$("#"+ Id_name ).css({"width":Cols * Box_Width,"margin":"auto"}); //设置Main的宽度并且居中
var Height_Array = [] ;//存放每个列的的高度的数组
;i<Box_Array.length;i++)
{
if(i<Cols) //将第一行作为列高度的初始值添加到数组中
{
Height_Array.push($(Box_Array[i]).innerHeight());
}
else
{
var min = Math.min.apply(null,Height_Array); //获取列高度数组中最小值
var min_index = get_index(Height_Array,min); //获取指定数组中的最小值的索引
$(Box_Array[i]).css({"position":"absolute","top":min,"left":Box_Width * min_index + "px"});
Height_Array[min_index] += $(Box_Array[i]).innerHeight();
}
}
}
//获取指定数组中的最小值的索引
function get_index(arr,val)
{
for(var i in arr)
{
if(arr[i] == val)
{
return i; //获取列高度数组中最小值的索引
}
}
}
function Add_WaterWall_ScrollEvent(Id_name,Class_name)
{
//绑定一个滚动事件
$(window).scroll(function()
{
var Box_Array = $("#"+ Id_name + ">." + Class_name); //获取所有的Box对象数组
//最后一个box距离顶部的距离 + 图片的一半高度
).offset().top + $(Box_Array).eq(Box_Array.length - ).innerHeight() / ) ;
var scrolltop = $("body,html").scrollTop(); //浏览器拖动的距离
var see_height = document.body.clientHeight || document.documentElement.clientHeight; //浏览器可视距离
if(lastbox_height < Math.floor(scrolltop +see_height))
{
var temp = _.template($("#temp").html()); //模板
var data = {
"img":[
{"src":"Images/P_00.jpg"},
{"src":"Images/P_01.jpg"},
{"src":"Images/P_02.jpg"},
{"src":"Images/P_03.jpg"},
{"src":"Images/P_04.jpg"},
{"src":"Images/P_05.jpg"},
{"src":"Images/P_06.jpg"},
{"src":"Images/P_07.jpg"},
{"src":"Images/P_08.jpg"}
],
"text":[
{"title":"Images/P_00.jpg"},
{"title":"Images/P_01.jpg"},
{"title":"Images/P_02.jpg"},
{"title":"Images/P_03.jpg"},
{"title":"Images/P_04.jpg"},
{"title":"Images/P_05.jpg"},
{"title":"Images/P_06.jpg"},
{"title":"Images/P_07.jpg"},
{"title":"Images/P_08.jpg"}
]
}; //模拟后台JSON数据
;i<data.img.length;i++)
{
$("#"+ Id_name).append
(
temp({
src : data.img[i].src
})
)
}
WaterWall(Id_name,Class_name);
}
})
}
html:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="Css/Basic.css" />
<script type="text/javascript" src="Js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="Js/underscore-min.js"></script>
<script type="text/javascript" src="Js/waterwall.js"></script>
<style type="text/css">
#main
{
position:relative;
}
.box
{
float:left;
padding:15px 0px 0px 15px; /* 只需要上，左两个方向的间隔即可 */
}
.pic
{
border:1px solid #ccc;
padding:10px;
border-radius:15px;
box-shadow:0px 0px 15px #ccc;
}
.pic>img
{
width:165px;
height:auto;
}
</style>
</head>
<body>
<div id="main">
<div class="box">
<div class="pic">
<img src="Images/P_00.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="Images/P_01.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="Images/P_02.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="Images/P_03.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="Images/P_04.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="Images/P_05.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="Images/P_06.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="Images/P_07.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="Images/P_08.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="Images/P_09.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="Images/P_010.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="Images/P_011.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="Images/P_012.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="Images/P_013.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="Images/P_014.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="Images/P_015.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="Images/P_016.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="Images/P_017.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="Images/P_018.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="Images/P_019.jpg" alt="" />
</div>
</div>
</div>
</body>
</html>
http://www.imooc.com/learn/101
Html - 瀑布流的更多相关文章
- jquery瀑布流的制作
首先,还是来看一下炫酷的页面: 今天就边做边说了: 一.准备工作 新建css,js,img文件夹存放相应文件,并在demo.html文件中引入外部文件(注意要把jquery文件引入),这里就不过多描述 ...
- js瀑布流 原理实现揭秘 javascript 原生实现
web,js瀑布流揭秘 瀑布流再很久之前流行,可能如我一样入行晚的 ,可能就没有机会去使用.但是这个技术终究是个挺炫酷的东西,花了一个上午来研究,用原生js实现了一个,下面会附上源码,供大家解读. 说 ...
- CollectionView水平和竖直瀑布流的实现
最近在项目中需要实现一个水平的瀑布流(即每个Cell的高度是固定的,但是长度是不固定的),因为需要重写系统 UICollectionViewLayout中的一些方法通过计算去实现手动布局,所以本着代码 ...
- 用jquery实现瀑布流案例
一.瀑布流是我们常见的案例,这里主要讲述,用jquery的方式实现瀑布流的功能! 引言:我们经常见到很多网站的瀑布流功能,如淘宝.京东这些商品等等.. 实现它我们首先考虑几个问题:1.获取到数据 ...
- RecylerView完美实现瀑布流效果
RecylerView包含三种布局管理器,分别是LinearLayoutManager,GridLayoutManager,StaggeredGridLayoutManager,对应实现单行列表,多行 ...
- 飞流直下的精彩 -- 淘宝UWP中瀑布流列表的实现
在淘宝UWP中,搜索结果列表是用户了解宝贝的重要一环,其中的图片效果对吸引用户点击搜索结果,查看宝贝详情有比较大的影响.为此手机淘宝特意在搜索结果列表上采用了2种表现方式:一种就是普通的列表模式,而另 ...
- iOS瀑布流实现(Swift)
这段时间突然想到一个很久之前用到的知识-瀑布流,本来想用一个简单的方法,发现自己走入了歧途,最终只能狠下心来重写UICollectionViewFlowLayout.下面我将用两种方法实现瀑布流,以及 ...
- 瀑布流StaggeredGridView 下拉刷新
1.项目中用到了瀑布流,之前用的是PinterestLikeAdapterView这个控件 然后上拉加载更多跟下拉刷新用的是XListView ,但是加载更多或者下拉刷新的时候闪屏,对用户体验很不好 ...
- iOS开发之窥探UICollectionViewController(四) --一款功能强大的自定义瀑布流
在上一篇博客中<iOS开发之窥探UICollectionViewController(三) --使用UICollectionView自定义瀑布流>,自定义瀑布流的列数,Cell的外边距,C ...
- iOS开发之窥探UICollectionViewController(三) --使用UICollectionView自定义瀑布流
上篇博客的实例是自带的UICollectionViewDelegateFlowLayout布局基础上来做的Demo, 详情请看<iOS开发之窥探UICollectionViewControlle ...
随机推荐
- Android 中“TabBar”的背景拉伸问题
在最近的一个工程中,要求有一个在上方了tabbar,上面有并排的3个方形按钮,每个按钮都有背景图.问题来了,如何让图片在不同尺寸的屏幕上不失真呢?(由于我们的项目比较小,工时很短,不能为每一个屏幕尺寸 ...
- c# 获取屏幕DPI
方法一:用ManagementClass来获取.需要引入System.Management.dll; using (ManagementClass mc = new ManagementClass(& ...
- MFC 相关文件夹、文件操作
//关于文件(夹)操作,可以参考下SHFileOperation这个外壳函数,貌似可以显示进度条.以下没有使用SHFileOperation//删除一个文件夹下的所有内容void myDeleteDi ...
- js “+” 连接字符串&数字相加 数字相加出现多位小数 函数调用单引号双引号嵌套和转义字符的使用
一.机制 JavaScript中,加号不仅表示相加还表示字符串连接 当加号两边存在字符串时,加号代表连接,实际上是将两侧都转为了字符串,如 "1" + 1 = "11&q ...
- snmp v3
http://blog.chinaunix.net/xmlrpc.php?r=blog/article&uid=7654720&id=3355515 http://tydldd.ite ...
- rabbitMq使用（mac平台）
1.下载 wget http://www.rabbitmq.com/releases/rabbitmq-server/v3.5.3/rabbitmq-server-mac-standalone-3.5 ...
- poj 2923 状压dp+01背包
好牛b的思路 题意:一系列物品,用二辆车运送,求运送完所需的最小次数,两辆车必须一起走 解法为状态压缩DP+背包,本题的解题思路是先枚举选择若干个时的状态,总状态量为1<<n,判断这些状态 ...
- 一个功能完备的.NET开源OpenID Connect/OAuth 2.0框架——IdentityServer3
今天推荐的是我一直以来都在关注的一个开源的OpenID Connect/OAuth 2.0服务框架--IdentityServer3.其支持完整的OpenID Connect/OAuth 2.0标准, ...
- 计数排序算法——时间复杂度O（n+k）
计数排序 计数排序是一个非基于比较的排序算法,该算法于1954年由 Harold H. Seward 提出.它的优势在于在对一定范围内的整数排序时,它的复杂度为Ο(n+k)(其中k是整数的范围),快于 ...
- Digital Image Processing 学习笔记2
第二章 2.1视觉感知要素 2.1.1 人眼的结构 眼睛由角膜与巩膜外壳.脉络膜和视网膜包围,晶状体由通信的纤维细胞层组成,并由附在睫状体上的纤维悬挂:视网膜上分布两类光感受器(锥状体和杆状体),他们 ...