下面是详细的"jQuery+HTML5美女瀑布流布局实现方法"攻略：
概述
瀑布流布局是近年来非常流行的一种网页布局方式，它可以将页面上的数据以瀑布流的方式呈现出来，形式非常美观。本文将介绍如何使用jQuery和HTML5实现一个简单的美女瀑布流布局。
实现步骤
第一步：HTML结构
首先，我们需要构建一个基本的HTML结构，该结构包含"container"、"box"两个基本元素：
<div class="container">
<div class="box">
<img src="#">
</div>
<div class="box">
<img src="#">
</div>
...
</div>
其中，每一个.box元素中包含一张图片，这些图片将被排列在container中。
第二步：CSS样式
接下来，我们需要定义一些CSS样式来让这些元素排列起来。下面是一些基础的CSS样式：
.container {
width: 100%;
overflow: hidden;
}
.box {
width: 23%;
margin: 1%;
float: left;
background: #eee;
position: relative;
}
.box img {
width: 100%;
height: auto;
display: block;
}
以上样式，将所有.box元素按照23%的宽度和1%的margin进行排列。同时，我们需要在.box元素中添加一个相对定位的position属性（position: relative），以便后面进行绝对定位操作。
第三步：实现定位
接下来，我们需要通过jQuery来实现这些.box元素的定位。首先，我们需要获取每一个.box元素，并为其设置绝对定位：
var boxs = $('.box');
var containerWidth = $('.container').width();
var boxWidth = boxs.eq(0).outerWidth();
var cols = Math.floor(containerWidth / boxWidth);
$('.box').each(function(index) {
if (index < cols) {
$(this).css({
'top': 0,
'left': (boxWidth + 2) * index
});
} else {
var minHeight = Math.min.apply(null, boxHeight);
var minIndex = $.inArray(minHeight, boxHeight);
$(this).css({
'position': 'absolute',
'top': minHeight + 2,
'left': boxs.eq(minIndex).position().left
});
boxHeight[minIndex] += boxs.eq(index).outerHeight() + 2;
}
});
以上代码通过计算容器宽度和每个.box元素的宽度，算出一共可以容纳多少列（cols）；针对每一个.box元素，判断它是在第一行，还是在第二行之后。在第一行（index小于cols）的.box元素，直接设置top和left即可；在第二行之后的.box元素，计算出当前列的高度，设置为当前.box元素的top，而left则采用最小高度的列的left属性。
第四步：瀑布流加载更多
最后，我们将实现瀑布流的"加载更多"功能。这需要通过监听scroll事件来实现：
$(window).on('scroll', function() {
if (checkScrollSlide()) {
//TODO
}
});
function checkScrollSlide() {
var lastBox = $('.box').last();
var lastBoxDis = lastBox.offset().top + Math.floor(lastBox.outerHeight() / 2);
var scrollTop = $(window).scrollTop();
var documentH = $(window).height();
return (lastBoxDis < scrollTop + documentH) ? true : false;
}
以上代码监听scroll事件，当滚动到距离最后一个.box元素的一半之后，触发加载更多的事件。
示例说明
示例1
下面是一个基于以上攻略实现的简单示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流布局示例</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
.container {
width: 100%;
overflow: hidden;
}
.box {
width: 23%;
margin: 1%;
float: left;
background: #eee;
position: relative;
}
.box img {
width: 100%;
height: auto;
display: block;
}
</style>
<script type="text/javascript">
$(function() {
var boxs = $('.box');
var containerWidth = $('.container').width();
var boxWidth = boxs.eq(0).outerWidth();
var cols = Math.floor(containerWidth / boxWidth);
var boxHeight = [];
boxs.each(function(index, value) {
var boxHeight = boxs.eq(index).outerHeight() + 2;
if (index < cols) {
boxHeight[index] = boxs.eq(index).outerHeight() + 2;
} else {
var minHeight = Math.min.apply(null, boxHeight);
var minIndex = $.inArray(minHeight, boxHeight);
$(this).css({
'position': 'absolute',
'top': minHeight + 2,
'left': boxs.eq(minIndex).position().left
});
boxHeight[minIndex] += boxs.eq(index).outerHeight() + 2;
}
});
$(window).on('scroll', function() {
if (checkScrollSlide()) {
$('.container').append($('.box').clone(true, true));
$(window).trigger('resize'); // 触发resize事件，重新布局
}
});
function checkScrollSlide() {
var lastBox = $('.box').last();
var lastBoxDis = lastBox.offset().top + Math.floor(lastBox.outerHeight() / 2);
var scrollTop = $(window).scrollTop();
var documentH = $(window).height();
return (lastBoxDis < scrollTop + documentH) ? true : false;
}
});
</script>
</head>
<body>
<div class="container">
<div class="box"><img src="http://placehold.it/350x350"></div>
<div class="box"><img src="http://placehold.it/320x450"></div>
<div class="box"><img src="http://placehold.it/300x300"></div>
<div class="box"><img src="http://placehold.it/450x450"></div>
<div class="box"><img src="http://placehold.it/300x300"></div>
<div class="box"><img src="http://placehold.it/200x450"></div>
<div class="box"><img src="http://placehold.it/410x280"></div>
<div class="box"><img src="http://placehold.it/350x350"></div>
<div class="box"><img src="http://placehold.it/300x300"></div>
<div class="box"><img src="http://placehold.it/450x450"></div>
<div class="box"><img src="http://placehold.it/300x300"></div>
</div>
</body>
</html>
该示例中，我们可以看到一排排排列的图片瀑布流布局。
示例2
下面是一个使用ajax获取数据的示例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Ajax瀑布流</title>
<style>
*{
padding: 0;
margin: 0;
list-style: none;
}
a{
text-decoration: none;
}
.box{
position: absolute;
margin: 15px;
}
.box img{
vertical-align: top;
}
#loading{
position: absolute;
top: 0;
left: 50%;
margin-left: -20px;
width: 40px;
height: 40px;
display: none;
background: url(./images/loading.gif) no-repeat center center;
}
#loadMore{
text-align: center;
margin: 10px 0;
padding: 10px;
background: #ccc;
color: #fff;
cursor: pointer;
}
#loadMore:hover{
background: #666;
}
</style>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div id="container">
<div class="box"><a href="#"><img src="./images/1.jpg" alt=""></a></div>
<div class="box"><a href="#"><img src="./images/2.jpg" alt=""></a></div>
.......
</div>
<div id="loading"></div>
<div id="loadMore">Load More</div>
<script>
var pageIndex = 0;
var imgData = {"data":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src":"10.jpg"},{"src":"11.jpg"},{"src":"12.jpg"},{"src":"13.jpg"},{"src":"14.jpg"},{"src":"15.jpg"},{"src":"16.jpg"},{"src":"17.jpg"},{"src":"18.jpg"},{"src":"19.jpg"},{"src":"20.jpg"},{"src":"21.jpg"},{"src":"22.jpg"},{"src":"23.jpg"},{"src":"24.jpg"},{"src":"25.jpg"},{"src":"26.jpg"},{"src":"27.jpg"},{"src":"28.jpg"},{"src":"29.jpg"},{"src":"30.jpg"}]};
imgLocation();
// 监听滚动条，新的图片load出来再重新排列图片
window.onscroll = function(){
if(checkScrollSlide){
$("#loading").show();
$.ajax({
url: './data/data.json',
type: 'GET',
dataType: 'json',
data: {pageIndex: pageIndex},
})
.done(function(data) {
pageIndex ++;
$.each(data.data,function(key, value){
var oBox = $("<div>").addClass("box").appendTo($("#container"));
var oPic = $("<div>").addClass("pic").appendTo($(oBox));
$("<img>").attr("src","./images/"+$(value).attr("src")).appendTo($(oPic));
});
imgLocation();
})
.fail(function() {
console.log("error");
})
.always(function() {
console.log("complete");
$("#loading").hide();
});
}
}
// 计算出新load图片的位置
function imgLocation(){
var box = $(".box");
var boxW = box.eq(0).width();
var num = Math.floor($("#container").width()/boxW);
var boxArr = [];
box.each(function(index,value){
var boxH = box.eq(index).height();
if (index < num){
boxArr[index] = boxH;
}else{
var minH = Math.min.apply(null, boxArr);
console.log(minH);
var minHIndex = $.inArray(minH, boxArr);
// console.log(minHIndex);
$(value).css({
"position":"absolute",
"top":minH+"px",
"left":box.eq(minHIndex).position().left+"px"
})
boxArr[minHIndex] += box.eq(index).height();
}
});
}
function checkScrollSlide(){
var lastBox = $('.box').last();
var lastBoxH = lastBox.offset().top + Math.floor(lastBox.height()/2);
var scrollTop = $(window).scrollTop();
console.log(lastBoxH,scrollTop,documentH)
var documentH = $(window).height();
return (lastBoxH < scrollTop + documentH) ? true : false;
}
</script>
</body>
</html>
该示例中采用了ajax获取数据，每次滚动至底部时，触发Ajax请求，并渲染新数据至页面上。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery+HTML5美女瀑布流布局实现方法 - Python技术站
微信扫一扫 
支付宝扫一扫 