原生-懒加载

最新推荐文章于 2024-02-20 14:17:07 发布

原创最新推荐文章于 2024-02-20 14:17:07 发布 · 151 阅读

0 ·

CC 4.0 BY-SA版权

原生专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了一种基于JavaScript的瀑布流布局实现方法，通过创建动态的列布局并智能加载图片，确保页面美观且响应迅速。文章深入解析了布局算法，包括如何计算列宽、跟踪最小高度列以及调整图片尺寸，同时提供了完整的代码示例。

1、公共文件

var Utils=(function () {		
	return {	
			//样式复制
			ce:function(type , style){
				var elem = document.createElement(type) ;
				if(style) Object.assign(elem.style , style) ;
				return elem ;
			} ,
			
			
			//颜色随机
			randomColor:function(){
				var col = "#" ;
				for(var i = 0 ; i < 6 ; i++){
                    col += Math.floor(Math.random() * 15).toString(16) ;
				} ;
				return col ;
			} ,

	}
})();

2、逻辑分解

/* 
	1|	创建ul、li，创建指定数量的li，并且做浮动，设置li的宽度
	2|	创建一个数组，这个数组里面是统计每个li的当前高度
	3|	创建图片，加载图片，设置图片宽度，获取图片高度
	4|	寻找数组中最小高度的索引值，在li中找到这个索引值对应的列
	5|	将加载进来的图片放入在这个列中，并且累加高度，存储在数组中对应的元素中
	6|	继续加载新的图片，加载图片当数量都完成时，让数值归3
*/

3、准备工作-定义

let {ce , randomColor} = Utils ;  //解构赋值
	
var bodyWidth ,     //内容宽度
		colWidth ,      //每一列的宽度
		ul ,
		img ;
		
var minHeight = [] ,    //最小高度数组
position = 3 ;      //定义图片名首位字符

const COL = 5 ,     //规定列数
MARGIN = 10 ;   //定义li间距的常量

4、代码实现

init() ;
function init(){
	document.body.style.margin = "0px" ;
	bodyWidth = document.documentElement.clientWidth ;  //打开页面后获取内容的宽度等于可视窗口的宽度
	colWidth = (bodyWidth - MARGIN * (COL - 1)) / COL ; //得到列的宽度
	createUl() ;
	loadImage() ;
}

function createUl(){
	ul = ce("ul" , {
		listStyle: "none" ,
		margin: "0px" ,
		padding: "0px"
	}) ;
	for(var i = 0 ; i < COL ; i++){     //循环队列，根据队列数创建li
		var li = ce("li" , {
			marginLeft: i === 0 ? "0px" : MARGIN + "px" ,
			width: colWidth + "px" ,     //让li的宽度等于求出的列宽
			height: "100px" ,
			backgroundColor: randomColor() ,
			float: "left"
		})
		minHeight.push(0) ;
		ul.appendChild(li) ;
	}
	document.body.appendChild(ul) ;
	window.addEventListener("resize" , resizeUl) ;
}

function loadImage(){
	img = new Image() ;
	img.addEventListener("load" , loadHandler) ;
	img.src = `img/ljz/${position}-.jpg` ;
}

function loadHandler(e){
	var img = this.cloneNode(false) ;
	var scale = img.width / img.height ;    //求出宽高比
	img.width = colWidth ;   //img的宽度等于列宽
	img.height = colWidth / scale ;    //根据宽度和宽高比求出每一项img高度
	var min = Math.min.apply(null , minHeight) ;    //求minHeight中最小值
	var index = minHeight.indexOf(min) ;    //查找minHeight数组中的最小值下标
	ul.children[index].appendChild(img) ;
	minHeight[index] += img.height ;
	resizeUl() ;
	if((document.documentElement.scrollHeight - document.documentElement.scrollTop) / document.documentElement.clientHeight > 3){
		window.addEventListener("scroll" , scrollHandler) ;
		return ;
	}
	addImage() ;
}

function resizeUl(){
	if(bodyWidth === document.documentElement.clientWidth) return ;
	bodyWidth = document.documentElement.clientWidth ;  //打开页面后获取内容的宽度等于可视窗口的宽度
	colWidth = (bodyWidth - MARGIN * (COL - 1)) / COL ; //得到列的宽度
	for(var i = 0 ; i < ul.children.length ; i++){
		var li = ul.children[i] ;
		li.style.width = colWidth + "px" ;
		var sum = 0 ;
		for(var j = 0 ; j < li.children.length ; j++){
			var img = li.children[j] ;
			var scale = img.width / img.height ;
			img.width = colWidth ;
			img.height = colWidth / scale ;
			sum += img.height ;
		}
		minHeight[i] = sum ;
	}
}

function addImage(){
	position ++ ;
	if(position > 79){
		position = 3 ;
	}
	img.src = `img/ljz/${position}-.jpg` ;
}

function scrollHandler(e){
	if(document.documentElement.scrollHeight - document.documentElement.scrollTop < 2 * document.documentElement.clientHeight){
		console.log("aaa") ;
		window.removeEventListener("scroll" , scrollHandler) ;
		addImage() ;
	}
}