gpt4 book ai didi

javascript - React 和 Gatsby : apply css/js masonry to some pages

转载 作者:行者123 更新时间:2023-12-02 21:35:46 27 4
gpt4 key购买 nike

我对 React 知之甚少,只是想让 Gatsby 作品集运行起来,其中包含一个索引页面和一个制作标记页面的模板。我想将此 css/js masonry 应用到我的索引和标记页面 https://codepen.io/didumos/pen/xNPKRJ

但我不确定最好的方法是什么。我是否想将 JS 分解为 utils.js 文件,并将其导入到 index.js 和 taggedtemplate.js 中?它相当长,并且有一些加载/刷新功能。一位同事告诉我使用钩子(Hook),但不知道如何使用。

任何建议表示赞赏!谢谢!

哦,stackoverflow 告诉我在链接到 codepen 时需要将代码粘贴进去。这是改编自该 codepen 的 JS。

const minColWidth = 500;
let roots;

function onLoad() {
var rootElements = document.getElementsByClassName('indexWrapper');
roots = Array.prototype.map.call(rootElements, function(rootElement) {
var cellElements = rootElement.getElementsByClassName('item');
var cells = Array.prototype.map.call(cellElements, function(cellElement) {
var style = getComputedStyle(cellElement);
return {
'element': cellElement,
'outerHeight': parseInt(style.marginTop) + cellElement.offsetHeight + parseInt(style.marginBottom)
};
});
return {
'element': rootElement,
'noOfColumns': 0,
'cells': cells
};
});

// do the first layout
onResize();
}

function onResize() {
for (let root of roots) {
// only layout when the number of columns has changed
var newNoOfColumns = Math.floor(root.element.offsetWidth / minColWidth);
if (newNoOfColumns != root.noOfColumns) {

// initialize
root.noOfColumns = newNoOfColumns;
var columns = Array.from(new Array(root.noOfColumns)).map( function(column) {
return {
'cells': new Array(),
'outerHeight': 0
};
});

// divide...
for (let cell of root.cells) {
var minOuterHeight = Math.min(...columns.map( function(column) {
return column.outerHeight;
}));
var column = columns.find( function(column) {
return column.outerHeight == minOuterHeight;
});
column.cells.push(cell);
column.outerHeight += cell.outerHeight;
}

// calculate masonry height
var masonryHeight = Math.max(...columns.map( function(column) {
return column.outerHeight;
}));

// ...and conquer
var order = 0;
for (let column of columns) {
for (let cell of column.cells) {
cell.element.style.order = order++;
// set the cell's flex-basis to 0
cell.element.style.flexBasis = 0;
}
// set flex-basis of the last cell to fill the
// leftover space at the bottom of the column
// to prevent the first cell of the next column
// to be rendered at the bottom of this column
column.cells[column.cells.length - 1].element.style.flexBasis = column.cells[column.cells.length - 1].element.offsetHeight + masonryHeight - column.outerHeight - 1 + 'px';
}

// set the masonry height to trigger
// re-rendering of all cells over columns
// one pixel more than the tallest column
root.element.style.maxHeight = masonryHeight + 1 + 'px';

console.log(columns.map( function(column) {
return column.outerHeight;
}));
console.log(root.element.style.maxHeight);
}
}
}

// subscribe to load and resize events
window.addEventListener('load', onLoad);
window.addEventListener('resize', onResize);

最佳答案

我在这里无法准确地说,因为我不确定确切的问题是什么。但看看代码,您似乎需要在 React 之旅中采取更小的步骤。你会希望尽可能避免 dom 查询和 dom 操作,这包括 getElementsByClassName,每个初学者都知道,但在 React 上下文中使用它大多会给你带来痛苦。 p>

你的同事关于钩子(Hook)的看法是正确的,只要你有 addEventListener 正在进行,你就应该使用它们,你会希望将它们包装在 useEffect 中以防止数百或数千个 addEventListener > 待执行。

有一个用于情感的 gatsby 插件,我在 CSS 中经常使用它。但是搜索 masonry,我怀疑它是为 React 设计的,除非有一个特定的插件,那么你可能会有更多的运气。否则,祝你好运!

关于javascript - React 和 Gatsby : apply css/js masonry to some pages,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60496283/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com