图集岛一行显示多图

Greasy Fork is available in English.

图集岛一行显示多图

添加一个选择框以设置图集岛页面每行显示的图片数量，并记住用户选择。包含1, 3, 6, 10, 20选项，默认为3。

当前为 2024-05-12 提交的版本，查看最新版本。

换行

// ==UserScript==
// @name         图集岛一行显示多图
// @namespace    lc1
// @version      1.5
// @description  添加一个选择框以设置图集岛页面每行显示的图片数量，并记住用户选择。包含1, 3, 6, 10, 20选项，默认为3。
// @match        https://www.sqmuying.com/* 
// @grant        GM_addStyle
// @grant        GM_setValue
// @grant        GM_getValue
// @license      MIT
// @run-at       document-idle
// ==/UserScript==

(function() {
    'use strict';

    // 获取用户设置的每行图片数量，如果未设置则默认为3
    var imagesPerRow = GM_getValue('imagesPerRow', 3);

    // 创建选择框并添加到页面左下角
    var settingsContainer = document.createElement('div');
    settingsContainer.style.position = 'fixed';
    settingsContainer.style.bottom = '10px';
    settingsContainer.style.left = '10px';
    settingsContainer.style.zIndex = '1000';

    var selectElement = document.createElement('select');
    selectElement.id = 'images-select';
    var options = [1, 3, 6, 10, 20]; // 包含1, 3, 6, 10, 20选项
    for (var i = 0; i < options.length; i++) {
        var option = document.createElement('option');
        option.value = options[i];
        option.textContent = options[i] === 1 ? '单图显示' : options[i] + '图显示';
        option.selected = options[i] === imagesPerRow;
        selectElement.appendChild(option);
    }
    settingsContainer.appendChild(selectElement);

    document.body.appendChild(settingsContainer);

    // 根据用户选择的图片数量设置样式
    setDisplayStyle();

    // 设置图片显示样式的函数
    function setDisplayStyle() {
        var styleRules = `
            #kbox {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
            }
            #kbox > img {
                width: ${100 / imagesPerRow}%; /* 根据选择的图片数量设置图片宽度 */
                height: auto; /* 保持图片的宽高比 */
                margin-bottom: 1px;
                object-fit: cover;
            }
        `;
        GM_addStyle(styleRules);
    }

    // 监听选择框变化事件，保存用户选择并更新样式
    document.getElementById('images-select').addEventListener('change', function() {
        imagesPerRow = parseInt(this.value);
        GM_setValue('imagesPerRow', imagesPerRow); // 保存用户选择
        setDisplayStyle(); // 更新样式
    });

    // 监听窗口大小变化，以动态更新图片显示样式
    window.addEventListener('resize', setDisplayStyle);
})();