<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
* {
margin: 0;
padding: 0;
}
.container {
position: relative;
width: 100%;
margin: 0 auto;
}
img {
width: 100px;
position: absolute;
margin: 5px 5px;
opacity: 0.5;
transition: all 0.5s;
}
.loading {
position: relative;
z-index: 2;
width: 100vw;
height: 100vh;
background-image: url(http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif);
background-size: cover;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="container">
<img src="http://via.placeholder.com/100x100" alt="图片">
</div>
<div class="loading">
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
//瀑布流渲染
var waterfall = {
init: function () {
this.isloading = true
this.bind()
},
//初始化数据
dataInit: function () {
this.imgNumber = null //img有多少个
this.heightArray = []
this.imgWidth = $('.container img').outerWidth(true)
this.minHeight = null
this.minIndex = null
this.imgNumber = Math.floor($('.container').width() / this.imgWidth)
for (let i = 0; i < this.imgNumber; i++) {
this.heightArray[i] = 0 //初始化高度数组都是0这样第一行所有图片都会在顶部
}
this.lineNumber = Math.floor($(window).height() / $('.container img').outerHeight(true)) //计算有多少行
},
bind: function () {
let _this = this
// 先初始化数据
this.dataInit()
// 根据用户浏览器大小插入相应数量的img
this.imgTemplate(this.imgNumber, this.lineNumber)
// 对加载完的img进行瀑布流布局
this.imgLoad()
// 判断img加载完成Hide windowLoading
this.loadingTimer = setInterval(function () {
_this.winLoad()
}, 1000)
},
//瀑布流核心代码，思路是load会为加载完成图片处理
imgLoad: function () {
var _this = this
$('img').on('load', function () {
_this.minHeight = _this.heightArray[0]
_this.minIndex = 0
for (let i = 0; i < _this.imgNumber; i++) {
if (_this.heightArray[i] < _this.minHeight) {
_this.minHeight = _this.heightArray[i]
_this.minIndex = i
}
}
$(this).css({
left: _this.minIndex * _this.imgWidth,
top: _this.minHeight,
opacity: 1
})
_this.heightArray[_this.minIndex] += $(this).outerHeight(true)
})
},
//值得注意的是需要将当前所有img遍历改变布局，相关数据需要初始化
imgResize: function () {
var _this = this
$(window).on('resize', function () {
_this.dataInit()
$('img').each(function () {
_this.minHeight = _this.heightArray[0]
_this.minIndex = 0
for (let i = 0; i < _this.imgNumber; i++) {
if (_this.heightArray[i] < _this.minHeight) {
_this.minHeight = _this.heightArray[i]
_this.minIndex = i
}
}
$(this).css({
left: _this.minIndex * _this.imgWidth,
top: _this.minHeight,
opacity: 1
})
_this.heightArray[_this.minIndex] += $(this).outerHeight(true)
// console.log(_this.heightArray)
})
})
},
//img模版
imgTemplate: function (imgNumber, lineNumber) {
this.sumNumber = imgNumber * lineNumber
for (let i = 0; i < this.sumNumber; i++) {
let $img = $('<img>')
let $color = Math.floor(Math.random() * 256)
let $imgSize = Math.floor(Math.random() * 300)
$img.attr({
src: `http://via.placeholder.com/100x${$imgSize}/${$color}`,
alt: '图片'
})
$('.container').append($img)
console.log('append')
}
},
// 懒加载+函数节流
imgScroll: function () {
let _this = this
let timer = null
$(window).on('scroll', function () {
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(function () {
let imgNumber = _this.imgNumber
let lineNumber = _this.lineNumber
if (_this.hasLoad($('img').last())) {
console.log(1)
_this.imgTemplate(imgNumber / 2, lineNumber / 2)
_this.imgLoad()
_this.loadingTimer = setInterval(function () {
_this.winLoad()
}, 1000)
}
}, 800)
})
},
// 懒加载核心代码
hasLoad: function ($node) {
let $winHeight = $(window).height()
let $scrollTop = $(window).scrollTop()
let $nodeHeight = $node.outerHeight(true)
let $offset = $node.offset().top
if ($winHeight + $scrollTop >= $offset - $nodeHeight) {
return true
} else {
return false
}
},
// 由于前边会setInterval，需要每次进入先off（load）
winLoad: function () {
let _this = this
$(window).off('load')
$(window).on('load', function () {
_this.isloading = false
// 当视口加载完成后 清除setInterval
clearInterval(_this.loadingTimer)
// 添加scroll事件
_this.imgScroll()
// 添加resize事件
_this.imgResize()
$('.loading').hide()
})
console.log(_this.isloading, 'isloading')
}
}
waterfall.init()
</script>
</body>
</html>
瀑布流+懒加载+函数节流
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 对象的深浅拷贝 对象的深拷贝与浅拷贝的区别： 浅拷贝：仅仅复制对象的引用, 而不是对象本身。 深拷贝：把复制的对象...
- review 1. DOM 文档对象模型 元素 新增/删除/插入/替换/复制 cloneNode(bol) 属性 ...
- 与函数去抖类似，函数节流是也是为了防止过多的DOM操作导致浏览器崩溃问题。但其思想与函数去抖不同，可以拿咖啡机打比...
- 效果图 来来来，看啊看，外面的世界多好看， 效果图展示的是瀑布流布局 && 懒加载的效果 数据 图片数据来源张鑫旭...
