当前位置：首页 > news >正文

网站建设小程序湖南云南网站建设招商

news 2025/9/18 12:55:36

网站建设小程序湖南,云南网站建设招商,杭州外贸网站建设公司,wordpress发布时间本地图片瀑布流浏览器asonry Image Viewer 前言效果图部分源码领取完整源码下期更新前言一款采用 HTML 的瀑布流本地图片浏览器「Masonry Image Viewer」只需要把你的图片文件夹拖到下载的 index 网页文件里面就可以实现瀑布流效果。项目免费开源，据介绍采用了HT…

本地图片瀑布流浏览器asonry Image Viewer

前言
效果图
部分源码
领取完整源码
下期更新

前言

一款采用 HTML 的瀑布流本地图片浏览器「Masonry Image Viewer」只需要把你的图片文件夹拖到下载的 index 网页文件里面就可以实现瀑布流效果。项目免费开源，据介绍采用了HTML、CSS 和 JavaScript 构建。

效果图

在这里插入图片描述

部分源码

//倒排
//缓存
//历史
//复制 移动 删除
navigator.serviceWorker.register("sw.js");
class Queue {constructor(items = []) {this.items = items;this.getters = [];}push(item) {this.items.push(item);if (this.getters.length > 0) this.getters.shift()(this.items.shift());}shift() {if (this.items.length === 0)return new Promise((resolve) => this.getters.push(resolve));return this.items.shift();}
}
class Semaphore {constructor(value = 1) {this.value = value;this.queue = [];}async acquire() {if (this.value > 0) this.value--;else return new Promise((resolve) => this.queue.push(resolve));}release() {this.value++;if (this.queue.length > 0) this.queue.shift()();}
}
DataView.prototype.getUint24 = function (byteOffset, littleEndian) {if (littleEndian) {return (this.getUint8(byteOffset) |(this.getUint8(byteOffset + 1) << 8) |(this.getUint8(byteOffset + 2) << 16));} else {return ((this.getUint8(byteOffset) << 16) |(this.getUint8(byteOffset + 1) << 8) |this.getUint8(byteOffset + 2));}
};
function throttle(func, ms = 1000) {let timeout;let con = this;return function () {if (timeout) return;func.apply(con, arguments);timeout = setTimeout(() => (timeout = null), ms);};
}
function debounce(func, ms = 1000) {let timeout;let con = this;return function () {clearTimeout(timeout);timeout = setTimeout(() => func.apply(con, arguments), ms);};
}
function range(start, end, step = 1) {let arr = [];for (let i = start; i < end; i += step) arr.push(i);return arr;
}
function flatObj(obj, path) {obj = path.split("/").reduce((obj, name) => obj[name], obj);function recurse(obj) {for (let key in obj) {if (typeof obj[key] === "object") recurse(obj[key]);else arr.push(obj[key]);}}let arr = [];recurse(obj);return arr;
}
let MB = 1024 ** 2;
let GB = 1024 ** 3;
function formatSize(bytes) {if (bytes < 1024) return `${bytes} B`;else if (bytes < MB) return `${(bytes / 1024).toFixed(2)} KB`;else if (bytes < GB) return `${(bytes / MB).toFixed(2)} MB`;
}
let sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
let log = console.log;
let docEl = document.documentElement;
let getEl = (id) => document.getElementById(id);
let newEl = (tag) => document.createElement(tag);
// #region elIds
let aspectratio = getEl("aspectratio");
let colcountinput = getEl("colcountinput");
let cover = getEl("cover");
let cursorplace = getEl("cursorplace");
let dirtree = getEl("dirtree");
let filtborder = getEl("filtborder");
let filtmono = getEl("filtmono");
let hint = getEl("hint");
let imgbox = getEl("imgbox");
let indicator = getEl("indicator");
let jumpTo = getEl("jumpTo");
let loadall = getEl("loadall");
let loadedcount = getEl("loadedcount");
let minheightinput = getEl("minheightinput");
let nextimg = getEl("nextimg");
let order = getEl("order");
let pause = getEl("pause");
let perload = getEl("perload");
let previmg = getEl("previmg");
let resort = getEl("resort");
let revert = getEl("revert");
let showcount = getEl("showcount");
let sidebar = getEl("sidebar");
let sidebtn = getEl("sidebtn");
let sortby = getEl("sortby");
let toend = getEl("toend");
let totalcount = getEl("totalcount");
let totop = getEl("totop");
let treebar = getEl("treebar");
let treebtn = getEl("treebtn");