wallhaven layout
// ==UserScript==
// @name wallhaven-layout
// @namespace http://tampermonkey.net/
// @version 2024-04-22
// @description wallhaven layout
// @author You
// @match https://wallhaven.cc/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=wallhaven.cc
// @require https://cdnjs.cloudflare.com/ajax/libs/decimal.js/9.0.0/decimal.min.js
// @grant none
// @license MIT
// ==/UserScript==
// import Decimal from "decimal.js";
(function () {
"use strict";
let width = document.querySelector("#thumbs")?.clientWidth - 20;
const load = () => {
getWallpaper();
const thumbs = document.querySelector("#thumbs");
const observerOptions = {
childList: true, // 观察目标子节点的变化，是否有添加或者删除
attributes: false, // 观察属性变动
subtree: false, // 观察后代节点，默认为 false
};
if (!thumbs) return;
const observer = new MutationObserver((mutations) => {
getWallpaper();
});
observer.observe(thumbs, observerOptions);
const resize = () => {
console.log(
"object :>> ",
document.querySelector("#thumbs")?.clientWidth
);
width = document.querySelector("#thumbs")?.clientWidth - 20;
getWallpaper();
};
window.addEventListener("resize", resize);
window.onunload = () => {
observer.disconnect();
window.removeEventListener("resize", resize);
};
};
function calcImageRow({ list, height, w, clientWidth, gap = 0 }) {
let grid = [
{
height: new Decimal(height),
list: [],
notFull: false,
},
];
let currentRowIndex = 0;
list.forEach((i) => {
const currentRow = grid[currentRowIndex];
const totalWidth = currentRow.list.reduce((acc, cur) => {
const width = new Decimal(currentRow.height).mul(cur.ratio);
return acc.add(width);
}, new Decimal(0));
/** 剩余宽度 */
const remainWidth = new Decimal(clientWidth).sub(totalWidth);
if (remainWidth.lt(w)) {
currentRowIndex++;
grid.push({
height: new Decimal(height),
list: [i],
notFull: false,
});
} else {
currentRow.list.push(i);
}
});
grid.forEach((row) => {
const totalWidth = row.list.reduce((acc, cur) => {
const width = new Decimal(row.height).mul(cur.ratio);
return acc.add(width);
}, new Decimal(0));
const totalRatio = row.list.reduce((acc, cur) => {
return acc.add(cur.ratio);
}, new Decimal(0));
const gapWidth = new Decimal(row.list.length + 1).mul(gap);
if (!totalWidth.plus(200).lt(clientWidth)) {
row.height = new Decimal(clientWidth).sub(gapWidth).div(totalRatio);
} else {
row.height = new Decimal(clientWidth).sub(gapWidth).div(totalRatio);
row.notFull = true;
}
});
return grid;
}
const getWallpaper = () => {
console.log("width :>> ", width);
const pages = document.querySelectorAll(".thumb-listing-page");
const pagesInfo = Array.from(pages).map((page) => {
page.style.textAlign = "left";
page.style.padding = 0;
page.style.paddingLeft = 10 + "px";
page.style.paddingBottom = 4 + "em";
page.style.height = page.scrollHeight + "px";
const imageDoms = page.querySelectorAll(".thumb-listing-page ul li");
return Array.from(imageDoms).map((imageDom) => {
const [w, h] =
imageDom
.querySelector(".thumb-info .wall-res")
?.textContent?.split(" x ") ?? [];
return {
url: imageDom.querySelector("img")?.dataset.src,
ratio: Number(new Decimal(w).div(h).toFixed(2)),
width: Number(w),
height: Number(h),
source: imageDom,
id: imageDom.querySelector("figure")?.dataset.wallpaperId,
};
});
});
const grids = pagesInfo.map((page, index) => {
return calcImageRow({
list: page,
height: 300,
w: 0,
clientWidth: width,
gap: 10,
});
});
console.log(grids, pagesInfo);
grids.forEach((grid) => {
grid.forEach((row, rowIndex) => {
row.list.forEach((image, index) => {
const { source: _source, height } = image;
const source = _source.querySelector("figure");
_source.style.verticalAlign = "top";
source.style.margin = 0;
source.style.marginRight = 10 + "px";
source.style.marginBottom = 10 + "px";
if (row.notFull && rowIndex === grid.length - 1) {
console.log("image :>> ", image, new Decimal(image.ratio).gt(1));
source.style.height = 300 + "px";
source.style.width = new Decimal(image.ratio).mul(300) + "px";
} else {
source.style.width = `${row.height.mul(image.ratio)}px`;
source.style.height = `${row.height}px`;
}
source.querySelector("img").style.height = `100%`;
source.querySelector("img").style.width = `100%`;
});
});
});
Array.from(document.querySelectorAll(".thumb-listing-page")).forEach(
(e) => {
const ulH = e.querySelector("ul").scrollHeight;
console.log("ulH :>> ", ulH);
e.style.marginTop = -e.style.scrollHeight - ulH + "px";
}
);
};
window.addEventListener("load", load);
// Your code here...
})();