【前端】用jQuery实现瀑布流效果
jQuery实现瀑布流效果
何为瀑布流:
瀑布流,又称瀑布流式布局。是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest,逐渐在国内流行开来。国内大多数清新站基本为这类风格。
瀑布流的应用:
瀑布流对于图片的展现,是高效而具有吸引力的,用户一眼扫过的快速阅读模式可以在短时间内获得更多的信息量,而瀑布流里懒加载模式又避免了用户鼠标点击的翻页操作,瀑布流的主要特性便是错落有致,定宽而不定高的设计让页面区别于传统的矩阵式图片布局模式,巧妙的利用视觉层级,视线的任意流动又缓解了视觉疲劳,同时给人以不拘一格的感觉,切中年轻一族的个性化心理。[1] 国内类Pinterest网站也如雨后春笋般出现,已知网站超40家,类Pinterest网站有四种,一是电商导购,如想去网、蘑菇街和美丽说、好享说、依托于淘宝平台;二是兴趣图谱分享,如知美、花瓣等;三是在细分垂直领域,如针对吃货的零食控、针对家居行业的他部落等。四是服装款式设计资讯平台如看潮网等等。
优
应用案例:
通用类:豆瓣市集,花瓣网,我喜欢,读图知天下
美女图片:图丽网
时尚资讯类:看潮网
时尚购物类:蘑菇街,美丽说,人人逛街,卡当网
品牌推广类:凡客达人
家居o2o类:新巢网小猫家
微博社交类: 都爱看
搞笑图片类:道趣儿
艺术收藏类:微艺术
潮流图文分享:荷都分享网
实现效果:
实现代码:
HTML:
- <!DOCTYPE html>
- <html>
- <head>
- <title>瀑布流</title>
- <meta charset="utf-8">
- <script type="text/javascript" src="../jquery/jquery-3.1.1.min.js"></script>
- <link rel="stylesheet" type="text/css" href="waterFall.css">
- </head>
- <body>
- <div id="main">
- <div class="pin">
- <div class="box">
- <img src="#" alt="img1" style="background-color: #03c03c;" width="200" height="300">
- </div>
- </div>
- <div class="pin">
- <div class="box">
- <img src="#" alt="img2" style="background-color: #03c03c;" width="200" height="400">
- </div>
- </div>
- <div class="pin">
- <div class="box">
- <img src="#" alt="img3" style="background-color: #03c03c;" width="200" height="350">
- </div>
- </div>
- <div class="pin">
- <div class="box">
- <img src="#" alt="img4" style="background-color: #03c03c;" width="200" height="200">
- </div>
- </div>
- <div class="pin">
- <div class="box">
- <img src="#" alt="img5" style="background-color: #03c03c;" width="200" height="400">
- </div>
- </div>
- <div class="pin">
- <div class="box">
- <img src="#" alt="img6" style="background-color: #03c03c;" width="200" height="100">
- </div>
- </div>
- <div class="pin">
- <div class="box">
- <img src="#" alt="img7" style="background-color: #03c03c;" width="200" height="330">
- </div>
- </div>
- <div class="pin">
- <div class="box">
- <img src="#" alt="img8" style="background-color: #03c03c;" width="200" height="200">
- </div>
- </div>
- <div class="pin">
- <div class="box">
- <img src="#" alt="img9" style="background-color: #03c03c;" width="200" height="450">
- </div>
- </div>
- <div class="pin">
- <div class="box">
- <img src="#" alt="img10" style="background-color: #03c03c;" width="200" height="500">
- </div>
- </div>
- <div class="pin">
- <div class="box">
- <img src="#" alt="img11" style="background-color: #03c03c;" width="200" height="200">
- </div>
- </div>
- <div class="pin">
- <div class="box">
- <img src="#" alt="img12" style="background-color: #03c03c;" width="200" height="100">
- </div>
- </div>
- <div class="pin">
- <div class="box">
- <img src="#" alt="img13" style="background-color: #03c03c;" width="200" height="300">
- </div>
- </div>
- </div>
- <script type="text/javascript" src="waterFall.js"></script>
- </body>
- </html>
CSS:
- *{
- margin: 0;
- padding: 0;
- }
- #main{
- position: relative;
- }
- .pin{
- padding: 15px 0 0 15px;
- float: left;
- }
- .box{
- padding: 5px;
- border-color: 1px solid #ccc;
- box-shadow: 0 0 6px #ccc;
- border-radius: 5px;
- }
jQuery:
- $(document).ready(function(){
- $(window).on("load", function(){
- imgLocation();
- var dataImg = {"data":[{"src":"alt1.jpg"},{"src":"alt2.jpg"}]};
- // 获取最后一张图片距离顶端的高度 + 它本身高度的一半
- $(window).scroll(function() {
- if(getSideHeight()){
- $.each(dataImg.data, function(index, value){
- var pin = $("<div>").addClass('pin').appendTo('#main');
- var box = $("<div>").addClass('box').appendTo(pin);
- var img = $("<img>").attr('src', 'images/' + $(value).attr("src")).appendTo(box);
- });
- imgLocation();
- }
- });
- });
- });
- //获取最后一张图片的高度
- function getSideHeight(){
- var box = $("pin");
- var lastImgHeight = (box.last().get(0)).offsetTop - Math.floor(box.last().height()/2);
- var documentHeight = $(document).height(); //获取当前窗口的高度
- var scrollHeight = $(window).scrollTop(); //获取滚动的距离
- return (lastImgHeight < documentHeight + scrollHeight) ? true:false;
- }
- //图片位置摆放
- function imgLocation(){
- var box = $(".pin"); //返回一个数值
- var boxWidth = box.eq(0).width(); //每张图片的宽度
- var num = Math.floor($(window).width()/boxWidth); //一行能放的图片的个数
- var numArr = [];
- box.each(function(index, value){
- var boxHeight = box.eq(index).height(); //获取每张图片的高度
- if(index < num){ //第一排
- numArr[index] = boxHeight;
- }
- else{ //第二排
- var minboxHeight = Math.min.apply(numArr,numArr);
- var minIndex = $.inArray(minboxHeight, numArr);
- $(value).css({
- position: "absolute",
- top: minboxHeight,
- left: box.eq(minIndex).position().left
- });
- numArr[minIndex] += box.eq(index).height(); //新高度
- }
- });
- }
【前端】用jQuery实现瀑布流效果的更多相关文章
- 用jQuery实现瀑布流效果学习笔记
jQuery一直没系统的学,只知道是js库,封装了好多js函数,方便了开发.以前做过一个原生的图片网站瀑布流效果,超级麻烦,这次用了jQuery方法,瞬间代码浓缩了,只有56行js代码.神奇的让我来把 ...
- jquery实现瀑布流效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery淡入淡出瀑布流效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery实现瀑布流
瀑布流布局多用于加载图片,或者图片配上文字.视觉表现为参差不齐的多栏布局.随着页面滚动条向下滚动,还会不断加载数据块并附加至当前尾部.本文就来利用jQuery实现一个图片瀑布流的效果. 1.布局. 首 ...
- WPF下制作的简单瀑布流效果
最近又在搞点小东西,美化界面的时候发现瀑布流效果比较不错.顺便就搬到了WPF,下面是界面 我对WEB前端不熟,JS和CSS怎么实现的,我没去研究过,这里就说下WPF的实现思路,相当简单. 1.最重要的 ...
- Jquery简单瀑布流代码示例
最近很多网站都采用瀑布流风格设计,感觉挺有个性的,比较合适做图片类型的网站,没事仿开心网做一个瀑布流示例. 需要用到Jquery,jquery.masonry.min.js <!DOCTYPE ...
- jquery版瀑布流
一个月前用jquery实现了瀑布流效果,看着当时的代码有点难过……今天抽时间稍微修改了一下.额,现在看起来不是那么难受了,就来和大家分享一下.废话不多说,开始正题~ 一.演示效果 二.html代码 & ...
- RecylerView完美实现瀑布流效果
RecylerView包含三种布局管理器,分别是LinearLayoutManager,GridLayoutManager,StaggeredGridLayoutManager,对应实现单行列表,多行 ...
- 使用JS实现图片展示瀑布流效果
不知大家有没有发现,一般的图片展示网站都会使用瀑布流效果,所谓的瀑布流 就是网站内的图片不会一下子全缓存出来,而是等你滚动到一定的距离的时候, 下面的图片才会继续缓存,并且图片也是随机出现的,只是宽度 ...
随机推荐
- JS 一条原型链扯到底
在正文之前,首先要知道两点, 1.__proto__是每个js 对象的内置属性,而prototype 是函数的内置属性,也是一个对象. 2.所谓原型,指的就是每个函数对象的prototype属性. f ...
- Customer segmentation – LifeCycle Grids with R(转)
I want to share a very powerful approach for customer segmentation in this post. It is based on cust ...
- Java-集合框架总结
集合框架: Java中的集合框架大类可分为Collection和Map:两者的区别: 1.Collection是单列集合:Map是双列集合 2.Collection中只有Set系列要求元素唯一:Map ...
- 利用npm安装/删除/发布/更新/撤销发布包 --社会我npm哥,好用话不多
一.什么是npm? npm是javascript的包管理工具,是前端模块化下的一个标志性产物 简单地地说,就是通过npm下载模块,复用已有的代码,提高工作效率 1.从社区的角度:把针对某一特定 ...
- 分清css的em和rem
在css中单位长度用的最多的是px.em.rem,这三个的区别是: px是固定的像素,一旦设置了就无法因为适应页面大小而改变. em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定 ...
- Day2 - Python基础2习题集
1.购物车程序 product_list = [ (), (), (), (), (), (), ] shooping_list = [] salary = input("Input you ...
- Oracle ORA-39726压缩表删除字段处理方法
今天在往一个压缩表增加一个字段可以增加成功,但在删除的时候报了个ORA-39726 unsupported add/drop column operation on compressed tables ...
- php实现ppt转图片,php调用com组件问题
PHP 调用com组件将ppt转为图片. 需要在php.ini中开启 extension=php_com_dotnet.dllcom.allow_dcom = true 测试代码如下: < ...
- 通过PHP前端后台交互/通过ajax前端后台交互/php基础传输数据应用/简单的留言版/简单的注册账户/简单的登录页/
前 言 PHP 通过上一篇博客,注册账号与登录页面--前后台数据交互 跳转转到index主页,接下来进入主页留言板功能,通过ajax向后台传输数据,同时发表留言. 具体的内容分析如下 ...
- Realm的一对多配置以及版本兼容
前言:本篇博客将介绍Realm的一些高级用法,基本使用在这里 一.配置一对多关系 // // Teacher.h #import <Realm/Realm.h> #import " ...