1.瀑布流
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>pubuliu</title>
<style>
.content {
font-size: 0;
position: relative;
}
.item {
position: absolute;
margin: 0;
padding: 0;
margin-bottom: 10px;
width: 100px;
transition: all 1s;
}
.h1 {
background-color: red;
height: 100px;
}
.h2 {
background-color: gray;
height: 200px;
}
.h3 {
background-color: green;
height: 80px;
}
.h4 {
background-color: orange;
height: 150px;
}
.h5 {
background-color: blue;
height: 90px;
}
.h6 {
background-color: yellow;
height: 100px;
}
</style>
</head>
<body>
<div class="content">
<div class="item h1"></div>
<div class="item h2"></div>
<div class="item h3"></div>
<div class="item h4"></div>
<div class="item h5"></div>
<div class="item h6"></div>
<div class="item h1"></div>
<div class="item h2"></div>
<div class="item h3"></div>
<div class="item h4"></div>
<div class="item h5"></div>
<div class="item h6"></div>
<div class="item h1"></div>
<div class="item h2"></div>
<div class="item h3"></div>
<div class="item h4"></div>
<div class="item h5"></div>
<div class="item h6"></div>
</div>
<script src="https://code.jquery.com/jquery-3.2.0.js"></script>
<script>
var $ct = $('.content');
var $items = $('.item')
var itemWidth = $items.outerWidth(true);
var listArr = [];
$(window).resize(function () {
waterFull();
})
waterFull();
function waterFull() {
var waterLength = parseInt(($ct.width()) / itemWidth);
for (var i = 0; i < waterLength; i++) {
listArr[i] = 0;
}
$items.each(function () {
console.log(listArr)
var minValue = Math.min.apply(null, listArr);
// console.log(minValue);
var minIndex = listArr.indexOf(minValue);
$(this).css({ left: minIndex * itemWidth, top: minValue })
// console.log(minValue,$(this).outerHeight(true));
listArr[minIndex] = minValue + $(this).outerHeight(true);
// console.log(listArr[minIndex]);
})
}
</script>
</body>
</html>
2.木桶布局(老师，我做的是随着窗口的扩大或者减小，重新布局，但是第一次加载的图片，跟扩大或者缩小的重新布局图片位置不一样，我认为是第一次加载图片监听onload第一张不是得到的真正的第一张图片，后面在扩大或者缩小已经缓存了，所以图片是正确位置。所以想问下老师，如何让第一次加载的图片位置跟以后我重新布局的图片位置一样)。能提供下思路吗，谢谢老师！
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>mutongbuju</title>
</head>
<style>
.ct {
position: relative;
/*width: 1000px;*/
/*margin: 0 auto;*/
}
.ct:after {
content: '';
display: block;
clear: both;
}
.box {
float: left;
font-size: 0;
margin: 0;
padding: 0;
margin-bottom: 10px;
height: 100px;
transition: all 1s;
}
.box>img {
height: 100%;
}
</style>
<body>
<div class="ct">
</div>
<script src="https://code.jquery.com/jquery-3.2.0.js"></script>
<script>
var $ct = $('.ct');
var urlsArr = getImgUrls(40);
var clearCt = true;
var firstLoad = true;
$(window).resize(function () {
$ct.empty();
var load = new loadImg();
})
function getImgUrls(num) {
var color, width, height, urls = [];
for (var i = 0; i < num; i++) {
color = Math.random().toString(16).substring(2, 8);
width = Math.floor(Math.random() * 100 + 50);
height = Math.floor(Math.random() * 30 + 50);
urls.push("http://placehold.it/" + width + "x" + height + "/" + color + "/fff");
}
return urls;
}
function loadImg() {
this.urlsArr = urlsArr;
this.listArr = [];
this.rowWidth = 0;
this.handleImg();
}
loadImg.prototype.handleImg = function () {
var xxx = 0;
_this = this;
$(_this.urlsArr).each(function (index, ele) {
var imgg = new Image();
imgg.src = this;
imgg.onload = function () {
xxx++;
console.log(imgg.src)
var imgWidth = 100 * imgg.width / imgg.height;
var newRowHeight;
_this.rowWidth += imgWidth;
// console.log(rowWidth)
_this.listArr.push($(imgg))
if (_this.rowWidth > $ct.width()) {
_this.listArr.pop();
// console.log(xxx,listArr.length)
_this.rowWidth -= imgWidth;
newRowHeight = 100 * $ct.width() / _this.rowWidth;
for (var i = 0; i < _this.listArr.length; i++) {
var $box = $('<div class="box"></div>')
$box.height(newRowHeight);
$box.append(_this.listArr[i])
$ct.append($box)
// if(clearCt){
// $ct.empty();
// }
console.log(_this.listArr[i])
}
// console.log(listArr)
_this.listArr = [];
_this.listArr.push($(imgg))
_this.rowWidth = imgWidth;
}
//如果图片数量有限会走下面这个方法处理。否则会少几张显示
if (index === _this.urlsArr.length - 1) {
for (var i = 0; i < _this.listArr.length; i++) {
var $box = $('<div class="box"></div>')
$box.height(100);
$box.append(_this.listArr[i])
$ct.append($box)
// if(clearCt){
// $ct.empty();
// }
// console.log(listArr[i])
}
}
// clearCt = false
// if(firstLoad){
// var load = new loadImg();
// firstLoad = false;
// }
}
})
}
var load = new loadImg();
// var load = new loadImg();
</script>
</body>
</html>
3.新闻瀑布流
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.contain {
width: 676px;
margin: 0 auto;
}
.waterfull {
list-style: none;
padding: 0;
margin: 0;
position: relative;
margin-left: -20px;
}
.waterfull:after {
content: '';
display: block;
clear: both;
}
.waterfull>li {
border: 1px solid #ccc;
width: 200px;
padding: 5px;
margin-bottom: 20px;
margin-left: 20px;
position: absolute;
/*float: left;*/
}
.waterfull>li img {
width: 100%;
}
.waterfull>li>h3 {
padding: 0;
margin: 0;
margin-top: 5px;
}
.waterfull>li>p {
padding: 0;
margin: 0;
margin-top: 5px;
color: #ccc;
font-size: 12px;
}
.contain>p {
visibility: hidden;
}
</style>
</head>
<body>
<div class="contain">
<ul class="waterfull">
<!--<li>
<a href="javascript:;"></a>
<h3>NASA计划研发金星漫游车</h5>
<p>美国航空航天局（NASA）披露了研制金星漫游车的计划。这台漫游车将完全不依赖电能，而是利用涡轮采集的风能进行工作。</p>
</li>-->
</ul>
<p>加载更多</p>
</div>
<script src="https://code.jquery.com/jquery-3.2.0.js"></script>
<script>
var page = 1;
var loading = false;
var listArr = [0, 0, 0]
//jsonp回调函数
function func(obj) {
for (var i = 0; i < obj.data.length; i++) {
var object = obj.data[i]
//创建li
var $li = getNode(object)
//监听图片下载完成，然后设置高度
//这个是领写的函数，直接写会莫名其妙的问题,就是append只拼接了一个
//for循环里有回调函数，都是坑 还是多用each，用另一个函数包裹
water($li)
}
//成功以后，设置继续可以请求数据
loading = false;
//页数加一
page++;
}
function getNode(object) {
return $('<li>\
<a href="'+ object.url + '"></a>\
<h3>'+ object.short_name + '</h5>\
<p>'+ object.name + '</p>\
</li>')
}
//重点 折腾了好长时间
function water($li){
$li.find('img').on('load', function () {
$('.waterfull').append($li)
//以下等append以后才再取值，否则娶不到 $li.outerHeight(true)
// console.log($li)
var minValue = Math.min.apply(null, listArr)
var minIndex = listArr.indexOf(minValue);
// console.log(111,listArr)
$li.css({ left: minIndex * $li.outerWidth(true), top: minValue })
listArr[minIndex] = $li.outerHeight(true)+minValue;
//算出父容器高度，把p标签弄下去
$('.waterfull').height(Math.max.apply(null,listArr));
console.log(listArr, listArr[minIndex],$li.outerHeight(true))
})
}
//第一次请求数据
loadNews();
function createScript() {
var scri = document.createElement('script')
scri.src = 'http://platform.sina.com.cn/slide/album_tech?jsoncallback=func&app_key=1271687855&num=10&page=' + page
document.body.appendChild(scri)
document.body.removeChild(scri)
}
///窗口滚动时
$(window).on('scroll', function () {
if(isShowP($('.contain>p'))){
loadNews();
}
})
//请求数据
function loadNews() {
console.log(loading)
if (loading === true) return;
loading = true;
if(isShowP($('.contain>p'))){
createScript()
// loadNews();
}
}
function isShowP($node) {
var scroTop = $(window).scrollTop();
var windowHeight = $(window).height();
var offsetT = $node.offset().top;
var pHeight = $node.height();
if (scroTop > offsetT - windowHeight) {
return true;
}
return false;
}
</script>
</body>
</html>
