您的位置：首页 > Web前端 > JQuery

瀑布流（jquery）

2015-08-25 14:01 721 查看

注：这是本人面试的时候的一个小作业，加上优化和调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"}}]

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html5 css3 jquery

相关文章推荐

新的分享

章节导航