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 ...
随机推荐
- Windows下使用命令行设置ip地址的DNS服务器
使用命令行或者编写bat批处理设置网络连接的IP地址以及DNS服务器地址有时候会比手动更加方便,IP地址和DNS的设置一般是配合的,常用到的几个状态是: 1.IP地址动态获取,DNS也动态 2.IP地 ...
- codeforces 483B Friends and Presents 解题报告
题目链接:http://codeforces.com/problemset/problem/483/B 题目意思:有两个 friends,需要将 cnt1 个不能整除 x 的数分给第一个friend, ...
- C标签判断两个值是否相等
c标签判断两个值是否相等 Integer用:${user1.id eq user2.id}:int用:${user1.id == user2.id} 测试代码如下:<c:if test=&quo ...
- ORACLE查询当前资产状态,和另一个数据库联查,(查询重复数据中第一条),子查询作为字段查询
背景:ORACLE查询当前资产状态,包含资产信息(表1),资产维修状态(表2),资产报废状态(表3) 如下: 资产信息:
- JavaScript封装成类
JavaScript在WEB编程中能起到很大的作用,将一些常用的功能写成JavaScript类库. 将下面代码保存为Common.js 类库功能: 1.Trim(str)--去除字符串两边的空格 2. ...
- [Android Pro] proguard.cfg 配置文件
转载自:http://my.oschina.net/zhangzhihao/blog/72393 # ------------------------------------- # android 原 ...
- eclipse 切换svn账号
1. 查看你的Eclipse中使用的是什么SVN Interface,位置在 windows > preference > Team > SVN 2. 如果是用的J ...
- cf112a(水题)
题目很简单..不过题意好像有点难懂... 题意:判定一个数能否被一个幸运数整除,循环一遍4到n/4,若存在i为幸运数且被n整除输出yes,反之输出no... 代码如下: #include <bi ...
- Windows 10 下ASP.NET4.0尚未在Web服务器上注册
系统换成Win10后,打开VS2012出现如下问题: 网上查找了,大部分都是 C:\WINDOWS\Microsoft.NET\Framework64\v4.0.30319 并管理员运行aspnet_ ...
- 实现Activity刷新(转)
目前刷新Acitivity,只想到几种方法.仅供参考,如果您有更好的方法,请赐教. 程序界面: 点击refresh view可以刷新界面,点击write content可以在EditText中自动写入 ...