瀑布流（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。

相关文章

前端原生js实现拖拽排课效果实例

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》：本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2
阅读更多...
CSS弹性布局常用设置方式

CSS弹性布局常用设置方式

《CSS弹性布局常用设置方式》文章总结了CSS布局与样式的常用属性和技巧,包括视口单位、弹性盒子布局、浮动元素、背景和边框样式、文本和阴影效果、溢出隐藏、定位以及背景渐变等,通过这些技巧,可以实现复杂... 一、单位元素vm 1vm 为视口的1%vh 视口高的1%vmin 参照长边vmax 参照长边re
阅读更多...
CSS3中使用flex和grid实现等高元素布局的示例代码

CSS3中使用flex和grid实现等高元素布局的示例代码

《CSS3中使用flex和grid实现等高元素布局的示例代码》：本文主要介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法，通过简单的两列实现、每行放置3列以及全部代码的展示，展示了这两种布局方式的实现细节和效果，详细内容请阅读本文，希望能对你有所帮助... 过往的实现方法是使用浮动加
阅读更多...
css渐变色背景|＜gradient示例详解

css渐变色背景|＜gradient示例详解

《css渐变色背景|＜gradient示例详解》CSS渐变是一种从一种颜色平滑过渡到另一种颜色的效果,可以作为元素的背景,它包括线性渐变、径向渐变和锥形渐变，本文介绍css渐变色背景|＜gradien... 使用渐变色作为背景可以直接将渐China编程变色用作元素的背景，可以看做是一种特殊的背景图片。（是作为背
阅读更多...
CSS自定义浏览器滚动条样式完整代码

CSS自定义浏览器滚动条样式完整代码

《CSS自定义浏览器滚动条样式完整代码》：本文主要介绍了如何使用CSS自定义浏览器滚动条的样式，包括隐藏滚动条的角落、设置滚动条的基本样式、轨道样式和滑块样式，并提供了完整的CSS代码示例，通过这些技巧，你可以为你的网站添加个性化的滚动条样式，从而提升用户体验，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...
css实现图片旋转功能

css实现图片旋转功能

《css实现图片旋转功能》：本文主要介绍了四种CSS变换效果：图片旋转90度、水平翻转、垂直翻转，并附带了相应的代码示例，详细内容请阅读本文，希望能对你有所帮助... 一 css实现图片旋转90度.icon{ -moz-transform:rotate(-90deg); -webkit-transfo
阅读更多...
vue基于ElementUI动态设置表格高度的3种方法

vue基于ElementUI动态设置表格高度的3种方法

《vue基于ElementUI动态设置表格高度的3种方法》ElementUI+vue动态设置表格高度的几种方法,抛砖引玉,还有其它方法动态设置表格高度,大家可以开动脑筋... 方法一、css + js的形式这个方法需要在表格外层设置一个div，原理是将表格的高度设置成外层div的高度，所以外层的div需要
阅读更多...
Vue项目中Element UI组件未注册的问题原因及解决方法

Vue项目中Element UI组件未注册的问题原因及解决方法

《Vue项目中ElementUI组件未注册的问题原因及解决方法》在Vue项目中使用ElementUI组件库时,开发者可能会遇到一些常见问题,例如组件未正确注册导致的警告或错误,本文将详细探讨这些问题... 目录引言一、问题背景1.1 错误信息分析1.2 问题原因二、解决方法2.1 全局引入 Element
阅读更多...
详解如何在React中执行条件渲染

详解如何在React中执行条件渲染

《详解如何在React中执行条件渲染》在现代Web开发中,React作为一种流行的JavaScript库,为开发者提供了一种高效构建用户界面的方式,条件渲染是React中的一个关键概念,本文将深入探讨... 目录引言什么是条件渲染？基础示例使用逻辑与运算符（&&）使用条件语句列表中的条件渲染总结引言在现代
阅读更多...
详解Vue如何使用xlsx库导出Excel文件

详解Vue如何使用xlsx库导出Excel文件

《详解Vue如何使用xlsx库导出Excel文件》第三方库xlsx提供了强大的功能来处理Excel文件,它可以简化导出Excel文件这个过程,本文将为大家详细介绍一下它的具体使用,需要的小伙伴可以了解... 目录1. 安装依赖2. 创建vue组件3. 解释代码在Vue.js项目中导出Excel文件，使用第三
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2