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实现瀑布流效果的更多相关文章

  1. 用jQuery实现瀑布流效果学习笔记

    jQuery一直没系统的学,只知道是js库,封装了好多js函数,方便了开发.以前做过一个原生的图片网站瀑布流效果,超级麻烦,这次用了jQuery方法,瞬间代码浓缩了,只有56行js代码.神奇的让我来把 ...

  2. jquery实现瀑布流效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. jQuery淡入淡出瀑布流效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. jQuery实现瀑布流

    瀑布流布局多用于加载图片,或者图片配上文字.视觉表现为参差不齐的多栏布局.随着页面滚动条向下滚动,还会不断加载数据块并附加至当前尾部.本文就来利用jQuery实现一个图片瀑布流的效果. 1.布局. 首 ...

  5. WPF下制作的简单瀑布流效果

    最近又在搞点小东西,美化界面的时候发现瀑布流效果比较不错.顺便就搬到了WPF,下面是界面 我对WEB前端不熟,JS和CSS怎么实现的,我没去研究过,这里就说下WPF的实现思路,相当简单. 1.最重要的 ...

  6. Jquery简单瀑布流代码示例

    最近很多网站都采用瀑布流风格设计,感觉挺有个性的,比较合适做图片类型的网站,没事仿开心网做一个瀑布流示例. 需要用到Jquery,jquery.masonry.min.js <!DOCTYPE ...

  7. jquery版瀑布流

    一个月前用jquery实现了瀑布流效果,看着当时的代码有点难过……今天抽时间稍微修改了一下.额,现在看起来不是那么难受了,就来和大家分享一下.废话不多说,开始正题~ 一.演示效果 二.html代码 & ...

  8. RecylerView完美实现瀑布流效果

    RecylerView包含三种布局管理器,分别是LinearLayoutManager,GridLayoutManager,StaggeredGridLayoutManager,对应实现单行列表,多行 ...

  9. 使用JS实现图片展示瀑布流效果

    不知大家有没有发现,一般的图片展示网站都会使用瀑布流效果,所谓的瀑布流 就是网站内的图片不会一下子全缓存出来,而是等你滚动到一定的距离的时候, 下面的图片才会继续缓存,并且图片也是随机出现的,只是宽度 ...

随机推荐

  1. 基于binlog来分析mysql的行记录修改情况(python脚本分析)

          最近写完mysql flashback,突然发现还有有这种使用场景:有些情况下,可能会统计在某个时间段内,MySQL修改了多少数据量?发生了多少事务?主要是哪些表格发生变动?变动的数量是怎 ...

  2. 卸载XCode插件的方法

    1.Finder--前往---前往文件夹--输入~/Library/Developer/Xcode/Plug-ins 2.删除要卸载的插件即可.

  3. Factoextra R Package: Easy Multivariate Data Analyses and Elegant Visualization

    factoextra is an R package making easy to extract and visualize the output of exploratory multivaria ...

  4. python之路 socket,socketsever初探

    socket的英文原义是"孔"或"插座".作为BSD UNIX的进程通信机制,取后一种意思.通常也称作"套接字",用于描述IP地址和端口,是 ...

  5. dialog使用方法(同一页面,调用一个js代码,实现多个不同样式的弹窗)

    html代码 <!DOCTYPE html><html><head>     <title></title>     <meta ch ...

  6. Hadoop化繁为简(二)—层层递进轻松入门hdfs

    层层递进-解开hdfs的面纱 1.hdfs是什么?它与普通服务器的文件系统有什么区别?它的特性有什么? 2.hdfs的工作原理是怎样的? 3.每台机器都单独启动有什么弊端?假设有1000台机器需要启动 ...

  7. JavaSE教程-04Java中循环语句for,while,do···while-练习2

    1.编写一个剪子石头布对战小程序 该法是穷举法:将所有情况列出来 import java.util.*; public class Game{ public static void main(Stri ...

  8. BOM(2)

    Window 子对象 (1)Location 对象 Location 对象包含有关当前 URL(统一资源定位符) 的信息.(Uniform Resource Location) Location 对象 ...

  9. 【数据库】Mean web开发 04-MongoDB在Linux上的安装及遇到的问题

    简介 Mean是JavaScript的全栈开发框架.更多介绍 用MongoDB实现持久数据的存储是Mean Web全栈开发中的一部分. MongoDB是一个介于关系数据库和非关系数据库之间的产品,是非 ...

  10. 机器学习:线性判别式分析(LDA)

    1.概述      线性判别式分析(Linear Discriminant Analysis),简称为LDA.也称为Fisher线性判别(Fisher Linear Discriminant,FLD) ...