进阶任务十八-瀑布流布局
2017-10-17 本文已影响0人
RookieD
实现一个瀑布流布局效果
<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<style>
.content{
position: relative;
}
.item{
position: absolute;
width: 200px;
margin-right: 10px;
margin-top: 10px;
transition: all 1s;
}
.h1{
height: 200px;
background-color: #f4b300;
}
.h2{
height: 300px;
background-color: #691BB8;
}
.h3{
height: 400px;
background-color: #006ac1;
}
</style>
<body>
<div class="content">
<div class="item h1">
1
</div>
<div class="item h3">
2
</div>
<div class="item h2">
3
</div>
<div class="item h1">
4
</div>
<div class="item h1">
5
</div>
<div class="item h3">
6
</div>
<div class="item h3">
7
</div>
<div class="item h2">
8
</div>
<div class="item h1">
9
</div>
<div class="item h3">
10
</div>
<div class="item h3">
11
</div>
<div class="item h3">
12
</div>
<div class="item h2">
13
</div>
<div class="item h2">
14
</div>
</div>
<script>
waterfull()
$(window).resize(function() {
waterfull()
})
function waterfull(){
var colLength = parseInt($(".content").width()/$(".item").width())
var itemArr = []
for(var i = 0; i < colLength; i++) {
itemArr[i] = 0
}
$(".item").each(function() {
var minValue = Math.min.apply(null, itemArr)
var minIndex = itemArr.indexOf(minValue)
$(this).css({
top: itemArr[minIndex],
left: $(this).outerWidth(true) * minIndex
})
itemArr[minIndex] += $(this).outerHeight(true)
})
}
</script>
</body>
</html>
根据课程视频实现一个新闻瀑布流新闻网站
<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<style>
html,body,ul,li,p,div {
padding:0;
margin: 0;
box-sizing: border-box;
}
ul,li {
list-style: none;
}
.warp {
width: 900px;
margin: 0 auto;
}
.clearfix:after {
content: "";
display: block;
clear: both;
}
#pic-ct {
position: relative;
}
#pic-ct .item {
position: absolute;
padding: 0 0 10px 0;
width: 280px;
margin: 10px;
border: 1px solid #dfdfdf;
background: #fff;
transition: all 0.8s;
opacity: 0;
}
#pic-ct .item img {
margin: 10px;
width: 260px;
}
#pic-ct .item .header {
height: 25px;
margin: 0 12px;
border-bottom: 1px solid #dbdbdb;
}
#pic-ct .desp {
font-size: 12px;
line-height: 1.8;
margin: 10px 15px 0;
color: #777371;
}
.load {
visibility: hidden;
height: 1px;
}
.hide {
display: none;
}
</style>
<body>
<div class="warp">
<div class="ct-waterfall">
<ul id="pic-ct" class="clearfix">
<li class="item hide"></li>
</ul>
<div class="load"></div>
</div>
</div>
<script>
var curPage = 1;
var perPageCount = 12
var colSumHeight = []
var nodeWidth = $(".item").outerWidth(true)
var colNum = parseInt($("#pic-ct").width()/nodeWidth)
for(var i=0; i < colNum; i++) {
colSumHeight[i] = 0
}
start()
$(window).scroll(function() {
if(isVisible($(".load"))) {
start()
console.log("test")
}
})
function start() {
getData(function(newsList) {
$.each(newsList, function(idx, news) {
var $node = getNode(news)
$node.find("img").load(function(){
$("#pic-ct").append($node)
waterFallPlace($node)
})
})
})
}
function getData(callback) {
$.ajax({
url: "http://platform.sina.com.cn/slide/album_tech",
dataType: "jsonp",
jsonp: "jsoncallback",
data: {
app_key: "1271687855",
num: perPageCount,
page: curPage,
}
}).done(function(ret) {
if(ret && ret.status && ret.status.code === "0"){
callback(ret.data);
curPage++
}else {
console.log("get error data")
}
})
}
function getNode(item){
var tpl = ''
tpl += '<li class="item">'
tpl += '<a href="' + item.url +'" class="link"></a>'
tpl += '<h4 class="header">' + item.short_name + '</h4>'
tpl += '<p class="desp">' + item.short_intro + '</p>'
tpl += '</li>'
return $(tpl)
}
function waterFallPlace($node) {
var idx = 0
var minSumHeight = colSumHeight[0]
for (var i = 0; i < colSumHeight.length; i++) {
if(colSumHeight[i] < minSumHeight) {
idx = i
minSumHeight = colSumHeight[i]
}
}
$node.css({
left: nodeWidth * idx,
top: minSumHeight,
opacity: 1
})
colSumHeight[idx] += $node.outerHeight(true)
$("#pic-ct").height(Math.max.apply(null, colSumHeight))
}
function isVisible($el) {
var scrollH = $(window).scrollTop()
var winH = $(window).height()
var top = $el.offset().top
if( top < winH + scrollH) {
return true
}else {
return false
}
}
</script>
</body>
</html>
