- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我对 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/
我正在尝试通过端口将 Elm 应用程序与 Masonry.js 集成,但我在尝试弄清楚如何获取 Signal Html 来触发告诉 Masonry.js 重绘 View 的端口时遇到了麻烦。 我正在使
我的网站设计了媒体查询,以覆盖不同大小的布局。我有砌体组织一堆全尺寸宽度的浮标,没问题。在移动宽度下,所有浮子都会浮起并堆叠在一起。所以我只需要在网站大小调整为平板电脑布局且 768px // */
我遇到了典型的砖石溢出问题。我正在尝试加载推特卡片,但在加载时,它们仍然相互重叠。一旦调整屏幕大小,它们就会工作。仅供引用,我肯定有 imageLoad 和 masonry 。我在 Rails 中这样
如何证明 masonry 网格元素居中? 似乎 Masonry 将我所有的网格项都 float 到左侧或将内容对齐到左侧: 1 2 3 4 5
我想在下拉菜单中使用 jquery masonry,在复杂的下拉菜单中组织动态菜单项 block (图像和文本)。 我有几个问题。 首先,如果我从 display:none 开始,那么 masonry
我在使用passy masonry时遇到了这个错误。知道这是什么意思吗?因为现在基本上 masonry 对我根本不起作用。 提前致谢 最佳答案 我不确定您的问题的原因是什么,但我只是在处理同样的事情,
我是编程新手(javascript),但为了使我的 tumblr 主题正常工作,过去几天我做了很多研究。我知道我的问题很常见,但似乎我没有足够的知识来正确集成许多类似示例中给出的代码部分。 My th
我正在使用 masonry和 typekit .因此,我希望布局为 not have overlapping由于图像加载,同时 render the typekit fonts without hav
我在一个项目中成功地使用了 Passy 的 angular-masonry。 https://github.com/passy/angular-masonry 访问 Masonry 对象的事件函数的最
我在将砌体与 Foundation 网格布局集成时遇到问题。本质上,对于不同高度的相同宽度的图像,砌体按预期工作,但在某些断点处,网格只有两列布局,而不是通常的四列布局。 但是,如果您继续最小化浏览器
我正在使用 Handlebars http://handlebarsjs.com/和砖石https://masonry.desandro.com/获取一些 JSON 数据并使用 Jquery prep
我正在尝试在以下页面上获取每个内容: http://snowbird.camorada.com/test.php 以砖石格式查看,如下所示: http://masonry.desandro.com/d
我对最新版本的砌体有一个奇怪的问题。之前让它工作,但对于一个新项目,我下载了最新版本的 jQuery 和 Masonry,一切正常。由于插件中的错误,IE7 不会加载 Masonry 库。 我在 IE
如何每次执行我的函数 Masonry脚本重新组织元素,例如当窗口调整大小时? 在这个例子中,它只在第一次工作。 $(document).ready(function() { $('#conta
我一直在尝试 Masonry,但无法完全按照我的意愿工作。我使用的元素的宽度和高度各不相同,但都适合一个网格(4 种不同的尺寸,所有最小+边距的倍数)。我还计算了可以精确拟合的元素分布(最小的 7 个
我正在创建一个带阴影的砖石布局。但不幸的是,阴影被剪裁为以下片段。我知道放一些底部填充可以解决这个问题,但是这张卡片的内容可以不时改变,然后高度会根据内容改变。所以这里的问题需要一个纯 CSS 方法来
我在 WordPress 中使用砌体布局,因此我本地站点的砌体布局与循环放在一起。我创建了一个 fiddle 来解释我的问题。 如何控制一个项目在砌体布局中的位置? 我希望 div 始终位于砖石容器的
我让它工作,但由于某种原因它停止工作,我不知道我做了什么。盒子 div 向左浮动,我只是不知道我在哪里'出了问题。 Jquery var $container = $('.work');
我怎样才能让砖石更多地尊重这里的原始元素顺序?我希望顺序是海豚、鱼、无脊椎动物、鳍足类: var $container = jQuery('.tax-product_cat #content'); $
在目录站点上使用 Masonry。默认情况下,显示的项目按日期排序,然后按部件号排序。我的图像高度不同。问题是,如果我错了,请纠正我,Masonry 将第 2 行第 1 项设置在第 1 行中最短的项下
我是一名优秀的程序员,十分优秀!