28.JavaScript实现简单的图片瀑布流插件
程序员文章站
2022-03-20 15:37:51
JavaScript实现简单的图片瀑布流插件 this.myPlugin = this.myPlugin || {}; /** * 制作图片瀑布流 */ this.myPlugin.createImgWaterfall = function (option) { var defaultOption ......
javascript实现简单的图片瀑布流插件
this.myplugin = this.myplugin || {};
/**
* 制作图片瀑布流
*/
this.myplugin.createimgwaterfall = function (option) {
var defaultoption = {
mingap: 10, //最小间隙
imgsrcs: [], //存储图片路径的数组
imgwidth: 200, //单张图片的宽度
container: document.body //存储图片瀑布流的容器
};
//将传入的参数option和默认的配置defaultoption合并
option = object.assign({}, defaultoption, option);
var imgs = []; //存放所有的图片元素的数组
//处理父元素
handleparent();
//创建图片元素
createimgs();
//将setimgposition设置为防抖函数，
//所有的图片加载完成后，隔一段时间执行setimgposition函数
var viewdebounce = debounce(setimgposition, 300);
window.onresize = viewdebounce; //浏览器视口尺寸改变，则重新设置图片位置信息
/**
* 检查父元素是否是定位元素
* 不是定位元素，要转变为定位元素
*/
function handleparent() {
var style = getcomputedstyle(option.container);
if (style.position === "static") { //没有定位
option.container.style.position = "relative"; //使用相对定位
}
}
/**
* 为每一张图片创建一个img元素
* 并且设置img元素的样式
*/
function createimgs() {
var imgdebounce = debounce(setimgposition, 300);
for (var i = 0; i < option.imgsrcs.length; i++) {
var img = document.createelement("img");
img.src = option.imgsrcs[i]; //设置图片路径
img.style.width = option.imgwidth + "px"; //设置图片宽度
img.style.position = "absolute"; //设置图片绝对定位
img.style.transition = ".5s"; //设置图片过渡时间
imgs.push(img);
img.onload = imgdebounce; //等图片加载完毕，设置图片位置信息
option.container.appendchild(img); //加入图片容器
}
}
/**
* 设置每个图片元素的位置信息
*/
function setimgposition() {
//获取图片的水平信息
var info = gethorizontalinfo();
console.log(info);
var arr = new array(info.imgnum); //存放下一行，每张图片的top值
arr.fill(0); //数组各项值填充为0
imgs.foreach(function (img) {
//设置每张图片的位置信息
var mintop = math.min.apply(null, arr); //找到数组中最小的top值
img.style.top = mintop + "px"; //设置图片的top值
var index = arr.indexof(mintop); //找到数组中最小值的下标
arr[index] += img.clientheight + info.gap; //设置下张图片的top值
img.style.left = index * (option.imgwidth + info.gap) + "px"; //设置图片的left值
});
//所有图片位置设置好后，计算容器最终的高度
var maxtop = math.max.apply(null, arr); //找到最大的top值
option.container.style.height = maxtop - info.gap + "px";
}
/**
* 获取图片的水平信息，包括
* 容器宽度:填充盒
* 一行可以放置图片的数量
* 图片与图片之间的水平和垂直空隙
*/
function gethorizontalinfo() {
var obj = {};
obj.containerwidth = option.container.clientwidth; //存放图片容器的宽度
//imgwidth*imgnum + mingab*(imgnum - 1) = containerwidth;
//图片宽度 * 图片数量 + 图片间的最小间隙*(图片数量-1) = 容器总宽度
//根据上面的公式变形后，得到一行可以放置的图片数量
obj.imgnum = (obj.containerwidth + option.mingap) / (option.imgwidth + option.mingap);
obj.imgnum = math.floor(obj.imgnum); //图片数量要向下取整
//图片之间的间隙 = (容器总宽度 - 图片宽度*图片数量) / (图片数量 - 1)
obj.gap = (obj.containerwidth - option.imgwidth * obj.imgnum) / (obj.imgnum - 1);
return obj;
}
/**
* 函数防抖，过一段时间后，执行某个函数
*/
function debounce(callback, time) {
var timer = null; //计时器
console.log(timer);
return function () {
console.log(timer);
timer && cleartimeout(timer); //每次执行，重新计时
var args = arguments;
timer = settimeout(function () {
callback.apply(null, args);
}, time);
}
}
};
功能：
1).可以自动根据浏览器视口宽度，改变图片瀑布流的宽度
2).添加了函数防抖功能
调用图片瀑布流插件：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>document</title>
<style>
.container {
border: 1px solid #000;
width: 90%;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
</div>
<script src="./js/myplugin.js"></script>
<script>
var imgsrcs = [];
for(var i = 1; i <= 40; i++){
imgsrcs.push(`./image/${i}.jpg`);
}
myplugin.createimgwaterfall({
imgsrcs: imgsrcs,
container: document.queryselector(".container") //存储图片瀑布流的容器
});
</script>
</body>
</html>
使用了40张图片的图片最后的效果
下一篇： Java 创建并应用PPT幻灯片母版