图集岛一行显示多张图

Greasy Fork is available in English.
图集岛一行显示多张图

自动触发图集岛网站的懒加载机制加载所有图片，并在完成后快速滚动到页面顶部260像素位置。同时允许用户设置每行显示的图片数量。
当前为 2024-05-12 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         图集岛一行显示多张图
// @namespace    lc1
// @version      1.5.4
// @description  自动触发图集岛网站的懒加载机制加载所有图片，并在完成后快速滚动到页面顶部260像素位置。同时允许用户设置每行显示的图片数量。
// @match        https://www.sqmuying.com/*
// @exclude      https://www.sqmuying.com/s/*
// @exclude      https://www.sqmuying.com/u/*
// @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] + '图显示';
        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: 10px; /* 增加一些间隔 */
                object-fit: cover;
            }
        `;
        GM_addStyle(styleRules);
    }

    // 监听选择框变化事件，保存用户选择并更新样式
    document.getElementById('images-select').addEventListener('change', function() {
        imagesPerRow = parseInt(this.value);
        GM_setValue('imagesPerRow', imagesPerRow); // 保存用户选择
        setDisplayStyle(); // 更新样式
        simulateScrollAndBackToTop(); // 触发滚动并快速回到顶部
    });

    // 监听窗口大小变化，以动态更新图片显示样式
    window.addEventListener('resize', function() {
        setDisplayStyle(); // 更新样式
        simulateScrollAndBackToTop(); // 触发滚动并快速回到顶部
    });

    // 定义一个函数来模拟滚动事件，自动加载图片并快速回到顶部
    function simulateScrollAndBackToTop() {
        // 滚动到页面底部，以触发懒加载
        window.scrollTo({
            top: document.body.scrollHeight,
            behavior: 'smooth'
        });

        // 设置延迟，等待图片加载完毕
        setTimeout(function() {
            // 快速滚动到页面顶部260像素位置
            window.scrollTo({
                top: 250,
                behavior: 'auto'
            });
        }, 800); // 延迟时间可以根据实际情况调整
    }

    // 初始滚动并快速回到顶部
    simulateScrollAndBackToTop();
})();