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.木桶布局(老師质帅，我做的是隨著窗口的擴(kuò)大或者減小，重新布局，但是第一次加載的圖片煤惩，跟擴(kuò)大或者縮小的重新布局圖片位置不一樣嫉嘀，我認(rèn)為是第一次加載圖片監(jiān)聽onload第一張不是得到的真正的第一張圖片，后面在擴(kuò)大或者縮小已經(jīng)緩存了盟庞，所以圖片是正確位置吃沪。所以想問下老師汤善，如何讓第一次加載的圖片位置跟以后我重新布局的圖片位置一樣)什猖。能提供下思路嗎，謝謝老師红淡！
<!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;
}
//如果圖片數(shù)量有限會(huì)走下面這個(gè)方法處理不狮。否則會(huì)少幾張顯示
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計(jì)劃研發(fā)金星漫游車</h5>
<p>美國(guó)航空航天局（NASA）披露了研制金星漫游車的計(jì)劃。這臺(tái)漫游車將完全不依賴電能在旱，而是利用渦輪采集的風(fēng)能進(jìn)行工作摇零。</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回調(diào)函數(shù)
function func(obj) {
for (var i = 0; i < obj.data.length; i++) {
var object = obj.data[i]
//創(chuàng)建li
var $li = getNode(object)
//監(jiān)聽圖片下載完成，然后設(shè)置高度
//這個(gè)是領(lǐng)寫的函數(shù)桶蝎，直接寫會(huì)莫名其妙的問題,就是append只拼接了一個(gè)
//for循環(huán)里有回調(diào)函數(shù)驻仅，都是坑 還是多用each，用另一個(gè)函數(shù)包裹
water($li)
}
//成功以后登渣，設(shè)置繼續(xù)可以請(qǐng)求數(shù)據(jù)
loading = false;
//頁(yè)數(shù)加一
page++;
}
function getNode(object) {
return $('<li>\
<a href="'+ object.url + '"></a>\
<h3>'+ object.short_name + '</h5>\
<p>'+ object.name + '</p>\
</li>')
}
//重點(diǎn) 折騰了好長(zhǎng)時(shí)間
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標(biāo)簽弄下去
$('.waterfull').height(Math.max.apply(null,listArr));
console.log(listArr, listArr[minIndex],$li.outerHeight(true))
})
}
//第一次請(qǐng)求數(shù)據(jù)
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)
}
///窗口滾動(dòng)時(shí)
$(window).on('scroll', function () {
if(isShowP($('.contain>p'))){
loadNews();
}
})
//請(qǐng)求數(shù)據(jù)
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>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
