您当前的位置:首页 > 电脑百科 > 程序开发 > 编程百科

JQuery实现瀑布流

时间:2020-08-05 11:11:38  来源:  作者:
JQuery实现瀑布流

 

这里需要jquery-2.1.1.min.js文件,请自行下载,图片请自行下载

首先,创建一个.html文件<!DOCTYPE html>

<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-2.1.1.min.js" type="text/JAVAscript"></script>
<script src="js/App.js" type="text/JavaScript"></script>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
</head>
<body>
<div id="container">
<div class="box">
<div class="content">
<img src="img/1.jpg"/>
</div>
</div>
<div class="box">
<div class="content">
<img src="img/2.jpg"/>
</div>
</div>
<div class="box">
<div class="content">
<img src="img/3.jpg"/>
</div>
</div>
<div class="box">
<div class="content">
<img src="img/4.jpg"/>
</div>
</div>
<div class="box">
<div class="content">
<img src="img/5.jpg"/>
</div>
</div>
<div class="box">
<div class="content">
<img src="img/6.jpg"/>
</div>
</div>
<div class="box">
<div class="content">
<img src="img/7.jpg"/>
</div>
</div>
<div class="box">
<div class="content">
<img src="img/8.jpg"/>
</div>
</div>
<div class="box">
<div class="content">
<img src="img/9.jpg"/>
</div>
</div>
<div class="box">
<div class="content">
<img src="img/10.jpg"/>
</div>
</div>
</div>
</body>
</html>写它的样式:style.css,创建一个css文件夹,把这个css样式放入到此文件夹里面*{margin: 0;padding: 0;
}
.box{position: relative;float: left;
}
.content{padding: 10px;border: 1px solid #ccc;box-shadow: 0 0 5px #ccc;/*添加边框阴影*/border-radius: 5px;/*圆角边框为5像素*/
JQuery实现瀑布流

 

目前是这种效果,这里就需要考虑,怎么让第二行的第一个图片接着第一行里面图片高度最小的图片下面
创建一个app.js文件

$(function(){
$(window).on("load", function () {imgLocation();
});});
function imgLocation(){
var box=$(".box");
var boxWidth=box.eq(0).width();//获取图片的宽度var num= Math.floor($(window).width()/boxWidth);//确定一排能摆放几个
var boxArry=[];//存储所有box的高度
box.each(function(index,value){
var boxHeight=box.eq(index).height();//盒子的高度
if(index<num)
{boxArry[index]=boxHeight;//往数组添加
}else{
var minboxHeigh=Math.min.apply(null,boxArry);//获取最小盒子的高度
var minboxIndex= $.inArray(minboxHeigh,boxArry);//获取盒子的位置
$(value).css({//设置第二行的第一张图片在第一行高度最小的那张图片下面
"position":"absolute",
"top":minboxHeigh,
"left":box.eq(minboxIndex).position().left});
boxArry[minboxIndex]+=box.eq(index).height();//记录第一行的最小高度和第二行第一个图片的高度}
});}

现在实现瀑布流的效果了

JQuery实现瀑布流

 

接下来就要实现滚动跳下来,实现自动加载图片的效果
如下是完整的app.js 内容:

$(function(){
$(window).on("load", function () {
imgLocation();
var dataImg={"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"}]};
window.onscroll=function(){
if(scollside())
{
$.each(dataImg.data,function(index,value){
//动态创建div
//动态创建内容div
//动态创建img,将src动态解析添加到内容层里面
var box=$("<div>").addClass("box").appendTo($("#container"));
var content=$("<div>").addClass("content").appendTo(box);
$("<img>").attr("src","./img/"+$(value).attr("src")).appendTo(content);
});
imgLocation();//再次调用一下瀑布流效果,不然不会出现瀑布流效果
}
};
});
});
function scollside(){
var box=$(".box");
/*box.last().get(0).offsetTop 盒子最后一个对象距顶端的距离*/
/*Math.floor(box.last().height/2) 最后图片的高度的一半*/
var lastboxHeigh=box.last().get(0).offsetTop+Math.floor(box.last().height()/2);
var documentHeight=$(document).width();//当前容器的高度
var scollHeight=$(window).scrollTop();//
return (lastboxHeigh<documentHeight+scollHeight)?true:false;//如果当前滚动高度和容器高度大于最后盒子的高度则加载图片
}
function imgLocation(){
var box=$(".box");
var boxWidth=box.eq(0).width();//获取图片的宽度
var num= Math.floor($(window).width()/boxWidth);//确定一排能摆放几个
var boxArry=[];//存储所有box的高度
box.each(function(index,value){
var boxHeight=box.eq(index).height();//盒子的高度
if(index<num)
{
boxArry[index]=boxHeight;//往数组添加
}else
{
var minboxHeigh=Math.min.apply(null,boxArry);//获取最小盒子的高度
var minboxIndex= $.inArray(minboxHeigh,boxArry);//获取盒子的位置
$(value).css({//设置第二行的第一张图片在第一行高度最小的那张图片下面
"position":"absolute",
"top":minboxHeigh,
"left":box.eq(minboxIndex).position().left
});
boxArry[minboxIndex]+=box.eq(index).height();//记录第一行的最小高度和第二行第一个图片的高度
}
});
}

说明一下,我这里的图片都经过处理宽度设置成了一样,如果没有设置的话,那么在css样式里面还要设置宽度固定,高度自适应即可!



Tags:JQuery 瀑布流   点击:()  评论:()
声明:本站部分内容来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除,谢谢。
▌相关评论
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
▌相关推荐
这里需要jquery-2.1.1.min.js文件,请自行下载,图片请自行下载首先,创建一个.html文件<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title><script s...【详细内容】
2020-08-05   JQuery 瀑布流  点击:(3)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条