瀑布流（jquery）

最新推荐文章于 2024-07-24 21:48:20 发布

苦逼的koala

最新推荐文章于 2024-07-24 21:48:20 发布

阅读量557

点赞数

分类专栏： CSS3 javascript 文章标签： html5 css3 jquery

本文链接：https://blog.csdn.net/u011445367/article/details/47976029

版权

CSS3 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

javascript

1 篇文章 0 订阅

订阅专栏

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

苦逼的koala

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
瀑布流（jquery）

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

扫一扫

专栏目录