JQuery实现简单瀑布流布局
本文实例为大家分享了JQuery实现简单瀑布流布局的具体代码，供大家参考，具体内容如下
分享一个基于JQuery实现的瀑布流布局，效果如下：
实现代码如下，欢迎大家复制粘贴。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>基于JQuery实现的瀑布流布局案例</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
#main {
position: relative;
}
.pin {
padding: 15px 0 0 15px;
float: left;
}
.box {
padding: 10px;
border: 1px solid #ccc;
box-shadow: 0 0 6px #ccc;
border-radius: 5px;
}
.box img {
width: 162px;
height: auto;
}
</style>
</head>
<body>
<div id="main">
<div class="pin">
<div class="box">
<img src="./images/1.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/2.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/3.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/4.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/5.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/6.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/7.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/8.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/9.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/10.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/11.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/12.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/13.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/14.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/15.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/16.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/17.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/18.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/19.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/20.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/21.jpg" />
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.8.3.min.js" />
</script>
<script>
$(window).on("load", function () {
//调用瀑布流函数
waterfall('main', 'pin');
//模拟json数据
var dataInt = { 'data': [{ 'src': '1.jpg' }, { 'src': '2.jpg' }, { 'src': '3.jpg' }, { 'src': '4.jpg' }] };
//滚动加载
window.onscroll = function () {
//判断是否具备加载剩余图片
if (checkscrollside()) {
//遍历模拟的json数据中dataInt.data值,得出下标和值
$.each(dataInt.data, function (index, value) {
//创建div添加class为pin，添加到ID为main的div中
var $oPin = $('<div>').addClass('pin').appendTo($("#main"));
//创建div添加class为box，添加到class为pin的div中
var $oBox = $('<div>').addClass('box').appendTo($oPin);
//创建图片添加src属性添加到class为box的div中
$('<img>').attr('src', './images/' + $(value).attr('src')).appendTo($oBox);
});
//调用瀑布流功能函数，让加载的图片按规则排列
waterfall();
};
}
});
//瀑布流功能函数
function waterfall(parent, pin) {
//获取所有图片容器（含内边距)
var $aPin = $("#main>div");
//获取其中一列的宽度 (outerWidth()可以获取padding值,width()无法获取)
var iPinW = $aPin.eq(0).width();
//通过整个窗口的宽度除以单列的宽度得出多少列,并向下取整
var num = Math.floor($(window).width() / iPinW);
//设置图片容器的宽度，并居中显示
$("#main").css({
'width:': iPinW * num,
'margin': '0 auto'
});
//存储每一行当中列的高度
var pinHArr = [];
//遍历所有的图片容器，得出下标和值
$aPin.each(function (index, value) {
//将当前图片的高度存在pinH中
var pinH = $aPin.eq(index).height();
//如果图片容器的下标小于当前的列数,即只有一行
if (index < num) {
//将第一行每一张图片的高度存在数组中
pinHArr[index] = pinH;
} else {
//通过Math.min.apply求出数组pinHArr（第一行）中高度的最小值
var minH = Math.min.apply(null, pinHArr);
//通过inArray(判断的值,所在数组)得出高度最小那张图片的下标
var minHIndex = $.inArray(minH, pinHArr);
//设置剩余图片的样式,value为Dom对象，要将其转换为JQuery对象
$(value).css({
//绝对定位
'position': 'absolute',
//top值
'top': minH + 15,
//left值为第一行中高度最小图片的left值
'left': $aPin.eq(minHIndex).position().left
});
//设置每一行中高度最小那一列的高度等于该列剩余图片高度的累加
pinHArr[minHIndex] += $aPin.eq(index).height() + 15;
}
});
}
//封装函数，检验是否需要加载图片
function checkscrollside() {
//获取所有图片容器（含内边距)
var $aPin = $("#main>div");
//将最后一张图片的top值加上该图片自身高度的一半存为变量lastPinH中
//注意last()获得的是一个数组,通过get(0)获得第一个
var lastPinH = $aPin.last().get(0).offsetTop + Math.floor($aPin.last().height() / 2);
//获取页面滚动的距离
var scrollTop = $(window).scrollTop();
//获取屏幕高度
var documentH = $(document).height();
//当lastPinH小于页面滚动距离与屏幕高度之和时,返回true，具备加载条件，否则返回false，不具备
return (lastPinH < scrollTop + documentH) ? true : false;
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
jQuery 瀑布流 浮动布局（一）(延迟AJAX加载图片)
浮动布局:即HTML结构的列,是用浮动方式. 一.功能分析: 1.判断图片是否进入可视区域: 2.用AJAX请求服务器数据: 3.将数据播入到相应的列队: 二.实现方法: 给window的scroll事件l绑定一个处理函数:做如下工作: 1.如何判断最后一行的图片,是否进入了可视区域? 如果:最后一行的某个图片距离浏览器可视区域顶部的距离值 小于 (可视区域的高度+滚动条滑动的距离值): 那么:就可以判定这个图片进入了浏览器的可视区域: 2.如何用AJAX请求服务器数据; $.getJSON()
-
jQuery实现瀑布流布局
HTML 复制代码 代码如下: <div id="main"> <div class="box"> <div class="pic"> <img src="images/0.jpg" alt=""> </div> </di
-
jQuery实现瀑布流布局详解（PC和移动端）
瀑布流布局已成为当今非常普遍的图片展示方式,无论是PC还是手机等移动设备上.这种布局图片的样式大概分为三种:等高等宽.等宽不等高.等高不等宽,接下来我们就最为普遍的等宽不等高形式来作为示例. 我们用百度图片作为范例: 这就是PC端比较常见的瀑布流布局方式,接下来我们审查下元素看看百度图片里面是如何布局: 可以看到,它里面实际是若干个等宽的列容器,通过计算将图片push到不同的容器里.而本文介绍的展示方法是通过定位的方式,虽然最后布局展示的方式不同,但之前的算法都比较类似. 动手 首先我们将如下样
-
jquery实现简单的瀑布流布局
是开头都会说的原理 瀑布流布局有两种,一种是固定列,一种是非固定列.在此主要记述第一种的实现. 固定列的特征是:无论页面如何缩放,每行的总列数都一致. 一行4列的瀑布流从布局的角度来说,就是4个li标签.通过一定的事件(比如滚动条滚动多少px),然后读取之,再把数据动态地添加到页面中. 添加数据原则,不是根据li索引值来加,而是根据各列中高度最短的的那列动态添加.否则可能导致页面很难看(左右高度不统一). 实例涉及ajax方法.可在服务器环境下运行. 废话不多说了.直接上样式. <ul id=&qu
-
网页瀑布流布局jQuery实现代码
什么是瀑布流网页布局? 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部. 下面来看代码,用纯CSS3来做看效果怎样! HTML <div id="all"> <div class="box"> <div class="pic"> <img src="cars/1.jpg"/>
-
jQuery 瀑布流 绝对定位布局（二）(延迟AJAX加载图片)
瀑布流-绝对定位布局,与浮动布局的区别在于 1.布局不一样: 绝对定位:一个UL里面放置所有的绝对定位的LI: 浮动布局:多个(一般三四个)UL分布放置LI: 2.AJAX不一样 绝对定位:只需要将请求来的JSON数据(当然可以是别的格式的数据),插入到UL就可以了.然后再对这个新插入的LI进行TOP和LEFT设置: 浮动布置:是将请求来的JSON数据(当然可以是别的格式的数据),分别插入到对应的UL当中,因为有绝对定位,所以不用对LI设置位置.会自动向下排列: 一.功能分析: 1.定位每一个L
-
Jquery实现瀑布流布局（备有详细注释）
本文实例讲述了Jquery实现瀑布流布局的方法.分享给大家供大家参考.具体如下: 瀑布流布局最近真的很流行,很多人都跟我一样想知道是怎么做出来的吧,经过网上搜索大量的参考结合N边的实验今天终于被我写出来了,为了便于大家理解我使用了jQuery(当然用源生js代码执行的效率会高一些,但是很多人多源生js不是很熟练). <!doctype html> <html> <head> <meta charset="utf-8"> <title
-
jQuery Masonry瀑布流布局神器使用详解
最近在做个网站时,其中有一部分涉及到很多图片布局,想采用比较流行的Water Flow布局. 开始的时候自己动手写的,真费事情,没有考虑检测图片大小,虽然也能达到布局效果,但是图片有的本身尺寸比较小却被强行拉大了,看起来很不和谐.后来上网收了一下,原来有很好的Water Flow布局工具使用.下面来认识一下这个神器吧~ 神器名称:JQuery Masonry , 网址:http://masonry.desandro.com/index.html 使用方法相当简单: 1.标记需要布局的容器和Ite
-
基于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' }]}; $(
-
jQuery+HTML5美女瀑布流布局实现方法
本文实例讲述了jQuery+HTML5美女瀑布流布局实现方法.分享给大家供大家参考.具体如下: 这是一款JavaScript与HTML5实现美女瀑布流布局,本方法是把图片的路径写在了JS的数组里,不过重点好像不是在这里,而是在图片如何自动排列的问题,你可以运行本实例后,点击"加载瀑布流布局"按钮,即可看到图片的瀑布流排列效果,现在很流行这个,希望您从本代码中能找到一些灵感. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-html