Widget:瀑布流

<style> .community-p { border-radius: 20px; padding: 20px; }

.community-waterfall { width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(275px, 1fr)); gap: 0; align-items: flex-start; transition: all 0.2s; }

.community-waterfall .fall-col { display: flex; flex-direction: column; gap: 0; transition: all 0.2s; }

.community-waterfall .fall-item { width: 100%; border-radius: 20px; overflow: hidden; }

.community-waterfall .fall-item img { width: 100%; }

</style> <script> (window.RLQ = window.RLQ || []).push(['jquery', async () => {

let config = { container: 'community-waterfall', col: 'fall-col', item: 'fall-item', rule: [ { screen: 0, column: 1, row_spacing: 22, col_spacing: 20, }, { screen: 320, column: 2, row_spacing: 24, col_spacing: 20, }, { screen: 768, column: 4, row_spacing: 28, col_spacing: 20, }, { screen: 1024, column: 6, row_spacing: 30, col_spacing: 20, }, { screen: 1280, column: 8, row_spacing: 32, col_spacing: 20, }, ], }; // 每列的高度 let colHeightArr = []; let imgSrcArr = [];

init(); function init() { const data = fetchData();

if (data?.parse?.text['*']) { imgSrcArr = extractImgSrc(data?.parse?.text['*']); // pager.total = srcArr.length; } //初始化 if ($(`.${config.container}`).length > 0) { masonryLoad(); } } function masonryLoad() { const currentRule = findRule(config.rule); let { column, col_spacing, row_spacing } = currentRule; setContainerAttr(column, col_spacing); createColumn(column, row_spacing);

imageLoad(column, col_spacing); } function findRule(arr) { const targetScreen = $(window).width(); let closestDifference = Infinity; let closestRule = null; for (const item of arr) { const difference = targetScreen - item.screen; if (difference > 0 && difference < closestDifference) { closestRule = item; closestDifference = difference; } } return closestRule; } function setContainerAttr(column, col_spacing) { $(`.${config.container}`).css({ // 给父级设置列数和列间距 display: 'grid', 'grid-template-columns': `repeat(${column}, 1fr)`, 'grid-column-gap': `${col_spacing}px`, }); } function createColumn(column, row_spacing) { if ($(`.${config.col}`).length > 0) { $(`.${config.container}`).html(); } // 列标签 let element = `

`; for (const key in range(column)) { colHeightArr[key] = 0; $(`.${config.container}`).append(element); } } function imageLoad(column, col_spacing) { let containerWidth = $(`.${config.container}`).width(); let itemWidth = (containerWidth - (column - 1) * col_spacing) / column;

for (let i in imgSrcArr) { const image = new Image(); image.width = itemWidth; image.src = `${imgSrcArr[i]}`;

image.onload = () => { console.log('image Loaded');

let element = `

<img src="${imgSrcArr[i]}" width="${itemWidth}px" />

`;

$(`.${config.container}`).append(element);

const selector = $(`.${config.container}`).find( `[data-index="${+i + 1}"]` ); layout(selector, itemWidth); }; } } function layout(imgItem, width) { let height = $(imgItem).find('img').height(); $(imgItem).attr('height', height); $(imgItem).css('width', width);

// 最小高度 let minHeight = Math.min(...colHeightArr); // 最小高度列的索引 let minHeight_index = colHeightArr.indexOf(minHeight); // 元素添加到对应列 const columnList = $(`.${config.col}`); $(imgItem).appendTo(columnList.eq(minHeight_index)); // 对应列需要更新 列高度数组 colHeightArr[minHeight_index] = $(`.${config.col}`) .eq(minHeight_index) .height(); }

//防抖 let loadInitTask = null; $(window).resize(function () { clearTimeout(loadInitTask); loadInitTask = setTimeout(() => { console.clear(); colHeightArr = []; masonryLoad(); }, 50); });

function range(val) { if (typeof val != 'number') { return []; } return [...Array(val).keys()]; } // ajax获取数据（同步） function fetchData() { $.ajaxSettings.async = false; const json = $.getJSON(mw.util.wikiScript('api'), { format: 'json', action: 'parse', text: ` `, contentmodel: 'wikitext', }); console.log(json.responseJSON, '================'); $.ajaxSettings.async = true; return json.responseJSON; } // 从 HTML 源代码中提取图像链接 function extractImgSrc(template = ) { const regex = /<img[^>]+src="([^"]+)"/g; const matches = template.match(regex);

if (matches) { const arr = matches.map((match) => { const [srcAttr, srcValue] = match.match(/src="([^"]+)"/); if (srcValue) { return srcValue; } }); return [...arr]; } else { console.log('没有找到匹配的 img 标签'); return []; } }

}]) </script>