瀑布流（jquery）

2024-06-08 13:38
文章标签 javascript jquery frontend 瀑布

本文主要是介绍瀑布流（jquery），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

注：这是本人面试的时候的一个小作业，加上优化和调bug用了2个白天做完的，因为之前看过瀑布流的实现方式，所以还算简单，但是当时很久没有动手比较手生时间用的比较久了，现在把代码贴出来，供大家吐槽

网站截图：


html代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>名片设计</title><link rel="stylesheet" type="text/css" href="css/css.css"><script type="text/javascript" src="js/jquery-2.1.4.min.js"></script><script type="text/javascript" src="js/waterfall.js"></script>
</head>
<body><header class="header"><nav class="nav"><a href="http://www.baidu.com/" class="logo"><img src="images/logo.png" alt="这是网页logo"></a><ul><li id="li"><a href="javascript:void(0)">首页</a><span class="icon"></span></li><li><a href="javascript:void(0)">视频素材</a><span></span></li><li><a href="javascript:void(0)">PPT模板</a><span></span></li><li><a href="javascript:void(0)">淘宝素材</a><span></span></li><li><a href="javascript:void(0)">装修设计</a><span></span></li><li><a href="javascript:void(0)">标志LOGO</a><span></span></li><li><a href="javascript:void(0)">更多作品</a><span></span></li></ul><form action=""><input type="seach" name="seach" placeholder="你能找到任何你想要" /></form></nav></header><!-- 他们正在购买 --><section id="center"><section class="asides"><aside class="otherPurchase more"><h2>他们正在购买</h2><section><h3><span class="aname">ZC软件</span><span></span>刚购买了<span></span><a href="" class="productName">国际简约大气名片</a></h3><a href="javascript:void(0)" class="productImg"><img src="images/image1.png" alt=""></a><p>售价：<span class="price">￥8.00</span>元</p><p>购买：<span class="sale">9</span>次</p></section><section><h3><span class="aname">pomoa</span><span class="txt">刚购买了</span><a href="" class="productName">高端名片设计</a></h3><a href="javascript:void(0)" class="productImg"><img src="images/image1.png" alt=""></a><p>售价：<span class="price">￥8.00</span>元</p><p>购买：<span class="sale">9</span>次</p></section><section><h3><span class="aname">joyday366</span><span class="txt">刚购买了</span><a href="" class="productName">高端名片设计</a></h3><a href="javascript:void(0)" class="productImg"><img src="images/image2.png" alt=""></a><p>售价：<span class="price">￥8.00</span>元</p><p>购买：<span class="sale">9</span>次</p></section></aside><!-- 他们正在上传 --><aside class="otherUpload more"><h2>他们正在上传</h2><section><h3><span class="aname">zyq</span><span class="txt">刚上传了</span><a href="" class="productName">绿色玉器bann高端大气</a></h3><a href="javascript:void(0)" class="productImg"><img src="images/image3.png" alt=""></a><p><a href="javascript:void(0)" class="productName">绿色玉器bann高端大气</a></p><p>售价：<span class="price">￥8.00</span>元</p></section><section><h3><span class="aname">ricard</span><span class="txt">刚上传了</span><a href="" class="productName">商业公司名片</a></h3><a href="javascript:void(0)" class="productImg"><img src="images/image4.png" alt=""></a><p><a href="javascript:void(0)" class="productName">商业公司名片</a></p><p>售价：<span class="price">￥8.00</span>元</p></section><section><h3><span class="aname">杜莎夫人图片美化工作室</span><span class="txt">刚上传了</span><a href="javascript:void(0)" class="productName">时尚粉红花朵电视墙</a></h3><a href="javascript:void(0)" class="productImg"><img src="images/image5.png" alt=""></a><p><a href="javascript:void(0)" class="productName">时尚粉红花朵电视墙</a></p><p>售价：<span class="price">￥8.00</span>元</p></section></aside></section><!-- 75%以上的用户购买了这些 --><article class="container mostPurchase waterfall"><h2>75%以上的用户购买了这些</h2><section class="box"><a href="javascript:void(0)" class="product"><img src="images/0.jpg" /><span class="hover productName">时尚粉红花朵电视墙</span></a><p><span class="price">￥8.00元</span><span class="sale">已出售9次</span></p></section ><section class="box"><a href="javascript:void(0)" class="product"><img src="images/1.jpg" /><span class="hover productName">时尚粉红花朵电视墙</span></a><p><span class="price">￥8.00元</span><span class="sale">已出售9次</span></p></section ><section class="box"><a href="javascript:void(0)" class="product"><img src="images/2.jpg" /><span class="hover productName">时尚粉红花朵电视墙</span></a><p><span class="price">￥8.00元</span><span class="sale">已出售9次</span></p></section ><section class="box"><a href="javascript:void(0)" class="product"><img src="images/3.jpg" /><span class="hover productName">时尚粉红花朵电视墙</span></a><p><span class="price">￥8.00元</span><span class="sale">已出售9次</span></p></section ><section class="box"><a href="" class="product"><img src="images/4.jpg" /><span class="hover productName">时尚粉红花朵电视墙</span></a><p><span class="price">￥8.00元</span><span class="sale">已出售9次</span></p></section ><section class="box"><a href="javascript:void(0)" class="product"><img src="images/5.jpg" /><span class="hover productName">时尚粉红花朵电视墙</span></a><p><span class="price">￥8.00元</span><span class="sale">已出售9次</span></p></section ><section class="box"><a href="javascript:void(0)" class="product"><img src="images/6.jpg" /><span class="hover productName">时尚粉红花朵电视墙</span></a><p><span class="price">￥8.00元</span><span class="sale">已出售9次</span></p></section ><section class="box"><a href="javascript:void(0)" class="product"><img src="images/7.jpg" /><span class="hover productName">时尚粉红花朵电视墙</span></a><p><span class="price">￥8.00元</span><span class="sale">已出售9次</span></p></section ><section class="box"><a href="" class="product"><img src="images/8.jpg" /><span class="hover productName">时尚粉红花朵电视墙</span></a><p><span class="price">￥8.00元</span><span class="sale">已出售9次</span></p></section ><section class="box"><a href="javascript:void(0)" class="product"><img src="images/9.jpg" /><span class="hover productName">时尚粉红花朵电视墙</span></a><p><span class="price">￥8.00元</span><span class="sale">已出售9次</span></p></section ><section id="loading">正在加载……</section></article></section><a href="javascript:void(0)" class="backTop" alt="回到顶部按钮" title="回到顶部"><span class="btn"></span></a>
</body>
</html>


css代码： 

*{margin:0;padding:0;
}
html{width:100%;height:100%;
}
body{font:bold 16px Microsoft YaHei,Arial, Helvetica, sans-serif;width:100%;height:100%;
}
a{color:#000;text-decoration:none;
}
/* header */
.header{width:100%;height:60px;line-height: 60px;position: fixed;top:0;left:0;background-color:#da4a4a;z-index: 5;
}
.nav{display: block;width: 1120px;height: 60px;margin: 0 auto;
}
.nav a.logo{float: left;line-height: 10px; margin-top: 9px;
}
.nav ul{float: left;margin-left: 70px;list-style:none;
}
.nav ul li{float: left;
}
li a{display: block;color:#fff;padding: 0 15px;
}
li span.icon{width: 0;height: 0;border-top: none;display: block;border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 10px solid #fff;margin: 0 auto;margin-top: -10px;
}
.nav input{float:left;margin-left: 10px;margin-top: 15px;width: 220px;height: 25px;border: none;	
}
/* 清除浮动 */
.nav::after, section::after{content: ".";display: block;height: 0;visibility: hidden; clear: both;
}/* header结束 *//* aside	侧边栏 正在购买 */
#center{width: 1150px;margin:100px auto;
}
aside.otherPurchase, aside.otherUpload{padding: 15px;border: 1px solid #ddd;
}
section.asides{float: left;width: 220px;
}
aside.more h2{font-size: 16px;color:#393a3c;border-left: 3px solid #da4a4a;padding-left: 15px;margin-left:-15px;
}
aside.more section{margin:20px 0;padding: 1px;
}
aside.more section span{padding-right: 5px;
}
aside.more h3{font-size: 13px;color: #aaa;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
h3 .productName{color: #555;
}
aside section img{float: left;margin-right: 10px;
}
aside section p{/* margin-top: 10px; */font-size: 14px;color: #333;
}
aside section a + p{margin-top: 10px;
}
p .price, p .sale{color:#da4a4a;
}
p a.productName{display: block;font-size: 15px;color:#077ec2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
aside section span.txt{padding:0 5px;
}
/* 右边瀑布流 */
.container{position: relative;width: 850px;margin-left: 260px;
}
.container h2{color:#333;font-weight: normal;margin: 5px auto 5px 0;
}
.box{display: block;padding: 15px 15px 0 15px;float: left; margin: 0px 10px 10px 0; width: 240px;border: 1px solid #ccc;
}
a.product span.productName{display: block;text-align: center;width: 240px;height: 30px;line-height: 30px;color: #fff;background-color: rgba(0,0,0,0.4);position: relative;margin-top: -35px;
}
a.product span.productName:hover{color: #077ec2;
} 
.box img{width: 240px;height: auto;
}
.box p{height: 40px;line-height: 40px;background: #eee;margin: 10px -15px 0 -15px;padding: 0 15px;
} 
.box p span{color: #333;
}
.box p span.price{float: left;
}
.box p span.sale{float: right;
}
.container::after{content: ".";display: block;height: 0;visibility: hidden; clear: both;
} 
#loading {display:none; line-height: 30px;background: rgba(0,0,0,0.2); color:#fff; text-align: center;height: 30px; width: 100%;position:fixed;bottom:0; 
}
a.backTop{width: 50px;height: 50px;display: none;position: fixed;right: 0;bottom: 10%;background-color: rgba(0,0,0,0.2);
}
span.btn::before{content: "";width: 0;height: 0;border-top: none;display: block;margin: 0 auto;padding-top: 5px;border-left: 18px solid transparent;border-right: 18px solid transparent;border-bottom: 18px solid #999;
}
span.btn::after{content: "";width: 15px;height: 20px;display: block;background-color: #999;margin: 0 auto;
}

js代码：

$(function() {var i = 1;/*回到顶部用的变量*/var $bTop = $('.backTop');var timer = null;var isTop = true;$(window).on("load", function() {waterfall();});$(window).on("resize", function() {waterfall();});$('li a').click(function() {var $span = $(this).next();$('li span').removeClass('icon');$span.addClass('icon');});function waterfall() {var cols = 3;var $boxs = $('.box');var hArr = [];$boxs.each(function(i, el) {if (i < cols) {hArr.push($(el).outerHeight(true));} else {var minBox = Math.min.apply(null, hArr);var minIndex = hArr.indexOf(minBox);// 计算及定义图片出现的位置/* 35是h1的高度*/$(el).css({'position': 'absolute','top': minBox + 35,'left': $boxs.eq(minIndex).position().left,});// 改变数组值hArr[minIndex] += $(el).outerHeight(true);}});}function getMore() {var html = "";$('#loading').show();$.getJSON("http://localhost/zhubajie_waterfall/data/data.json", function(data) {$.each(data, function(i, val) {html += '<section class="box"><a href="" class="product"><img src="' + val.img.img + '" /><span class="hover productName">' + val.title + '</span></a><p><span class="price">￥' + val.price + '元</span><span class="sale">已出售' + val.sale + '次</span></p></section >';});$('#loading').hide();$('.container').append(html);waterfall();i = 1;});}$(window).bind("scroll", function() {if ($(document).scrollTop() + $(window).height() > $(document).height() - 10 && i == 1) {i = 0;getMore();}/*回到顶部 *///获取界面可视区域的高度var clientH = $(window).height();//滚动条滚动时触发，用户是否滚动var osTop = $(document).scrollTop(); //获取滚动条距离顶部的高度//隐藏显示按钮if (osTop >= clientH) {$bTop.css("display", "block");} else {$bTop.css("display", "none");}if (!isTop) {clearInterval(timer);}isTop = false;});$bTop.click(function() {$.extend({backTopScroll: function() {var osTop = $(document).scrollTop(); //获取滚动条距离顶部的高度var ispeed = Math.floor(-osTop / 10);$(window).scrollTop(osTop + ispeed);$(document).scrollTop(osTop + ispeed);isTop = true;if (osTop == 0) {clearInterval(timer);}}});timer = setInterval("$.backTopScroll()", 30);});
});

data.json:(下边的图片链接是当时公司给的)

[{"timestamp":1373746212000,"title":"佐罗理想","sale":6,"price":91,"img":{"width":250,"height":495,"img":"http://placehold.it/250x495"}},{"timestamp":1399494398000,"title":"Apple美好","sale":8,"price":5,"img":{"width":255,"height":217,"img":"http://placehold.it/255x217"}},{"timestamp":1353872320000,"title":"理想理想","sale":7,"price":22,"img":{"width":244,"height":261,"img":"http://placehold.it/244x261"}},{"timestamp":1334625124000,"title":"图片图片","sale":5,"price":35,"img":{"width":254,"height":324,"img":"http://placehold.it/254x324"}},{"timestamp":1360987062000,"title":"Apple人生","sale":2,"price":44,"img":{"width":260,"height":543,"img":"http://placehold.it/260x543"}},{"timestamp":null,"title":"Apple梦","sale":5,"price":50,"img":{"width":250,"height":525,"img":"http://placehold.it/250x525"}},{"timestamp":1363562713000,"title":"梦热血","sale":6,"price":20,"img":{"width":253,"height":236,"img":"http://placehold.it/253x236"}},{"timestamp":1375829951000,"title":"海贼王热血","sale":3,"price":50,"img":{"width":260,"height":209,"img":"http://placehold.it/260x209"}},{"timestamp":1328396654000,"title":"热血图片","sale":5,"price":36,"img":{"width":253,"height":506,"img":"http://placehold.it/253x506"}},{"timestamp":1375724797000,"title":"梦理想","sale":7,"price":94,"img":{"width":250,"height":364,"img":"http://placehold.it/250x364"}}]



这篇关于瀑布流（jquery）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1042337。

相关文章

CSS place-items: center解析与用法详解

CSS place-items: center解析与用法详解

《CSSplace-items:center解析与用法详解》place-items:center;是一个强大的CSS简写属性，用于同时控制网格(Grid)和弹性盒(Flexbox)... place-items: center; 是一个强大的 css 简写属性，用于同时控制 网格(Grid) 和 弹性盒(F
阅读更多...
CSS实现元素撑满剩余空间的五种方法

CSS实现元素撑满剩余空间的五种方法

《CSS实现元素撑满剩余空间的五种方法》在日常开发中，我们经常需要让某个元素占据容器的剩余空间，本文将介绍5种不同的方法来实现这个需求，并分析各种方法的优缺点，感兴趣的朋友一起看看吧... css实现元素撑满剩余空间的5种方法 在日常开发中，我们经常需要让某个元素占据容器的剩余空间。这是一个常见的布局需求
阅读更多...
CSS Anchor Positioning重新定义锚点定位的时代来临(最新推荐)

CSS Anchor Positioning重新定义锚点定位的时代来临(最新推荐)

《CSSAnchorPositioning重新定义锚点定位的时代来临(最新推荐)》CSSAnchorPositioning是一项仍在草案中的新特性，由Chrome125开始提供原生支持需... 目录 css Anchor Positioning：重新定义「锚定定位」的时代来了！ 什么是 Anchor Pos
阅读更多...
CSS中的Static、Relative、Absolute、Fixed、Sticky的应用与详细对比

CSS中的Static、Relative、Absolute、Fixed、Sticky的应用与详细对比

《CSS中的Static、Relative、Absolute、Fixed、Sticky的应用与详细对比》CSS中的position属性用于控制元素的定位方式，不同的定位方式会影响元素在页面中的布... css 中的 position 属性用于控制元素的定位方式，不同的定位方式会影响元素在页面中的布局和层叠关
阅读更多...
HTML5 getUserMedia API网页录音实现指南示例小结

HTML5 getUserMedia API网页录音实现指南示例小结

《HTML5getUserMediaAPI网页录音实现指南示例小结》本教程将指导你如何利用这一API，结合WebAudioAPI，实现网页录音功能,从获取音频流到处理和保存录音，整个过程将逐步... 目录1. html5 getUserMedia API简介1.1 API概念与历史1.2 功能与优势1.3
阅读更多...
全面解析HTML5中Checkbox标签

全面解析HTML5中Checkbox标签

《全面解析HTML5中Checkbox标签》Checkbox是HTML5中非常重要的表单元素之一，通过合理使用其属性和样式自定义方法，可以为用户提供丰富多样的交互体验，这篇文章给大家介绍HTML5中C... 在html5中，Checkbox（复选框）是一种常用的表单元素，允许用户在一组选项中选择多个项目。本
阅读更多...
HTML5 搜索框Search Box详解

HTML5 搜索框Search Box详解

《HTML5搜索框SearchBox详解》HTML5的搜索框是一个强大的工具，能够有效提升用户体验,通过结合自动补全功能和适当的样式，可以创建出既美观又实用的搜索界面,这篇文章给大家介绍HTML5... html5 搜索框（Search Box）详解搜索框是一个用于输入查询内容的控件，通常用于网站或应用程
阅读更多...
CSS3中的字体及相关属性详解

CSS3中的字体及相关属性详解

《CSS3中的字体及相关属性详解》：本文主要介绍了CSS3中的字体及相关属性，详细内容请阅读本文，希望能对你有所帮助... 字体网页字体的三个来源：用户机器上安装的字体，放心使用。保存在第三方网站上的字体，例如Typekit和Google,可以link标签链接到你的页面上。保存在你自己Web服务器上的字
阅读更多...
html 滚动条滚动过快会留下边框线的解决方案

html 滚动条滚动过快会留下边框线的解决方案

《html滚动条滚动过快会留下边框线的解决方案》：本文主要介绍了html滚动条滚动过快会留下边框线的解决方案，解决方法很简单，详细内容请阅读本文，希望能对你有所帮助... 滚动条滚动过快时，会留下边框线但其实大部分时候是这样的，没有多出边框线的滚动条滚动过快时留下边框线的问题通常与滚动条样式和滚动行
阅读更多...
使用vscode搭建pywebview集成vue项目实践

使用vscode搭建pywebview集成vue项目实践

《使用vscode搭建pywebview集成vue项目实践》：本文主要介绍使用vscode搭建pywebview集成vue项目实践,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录环境准备项目源码下载项目说明调试与生成可执行文件核心代码说明总结本节我们使用pythonpywebv
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2