本地图片瀑布流浏览器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");

---

领取完整源码

本地图片瀑布流浏览器asonry Image Viewer 源码地址：https://www.123pan.com/s/ji8kjv-yiXU3.html关注微信公众号 祖龙科技工作室回复 图片排列 即可领取

---

下期更新

孤客支付系统

• 📢本人公众号：祖龙科技工作室
• 📢博客主页：孤客网络科技工作室官方账号
• 📢欢迎点赞👍收藏⭐️留言 📝如有错误敬请指正！
• 📢本文由孤客原创，若侵权联系作者，首发于CSDN博客
• 📢停下休息的时候不要忘了别人还在奔跑，希望大家抓紧时间学习，全力奔赴更好的生活💻