Javascript 使用bricks.js创建一个砌体并进行反应 代码情况

我有一个简单的react应用程序设置。主构件应该是具有砌体布局的图像库。我发现这个图书馆： 我使用加载api中项目的数据（名称、日期、url到图像）

以下是我在Home.js中的部分代码：

构造函数（）

此函数用于加载项目的数据

getItems(limit){
  fetch('http://localhost:3000/api/posts/next/' + limit)
    .then((response) => {
      return response.json()
    }).then((data) => {
      this.setState({galleryItems: data});
    })
}

我使用componentDidMount（）函数加载5项并创建Bricks.js实例

componentDidMount(){
  this.getItems(5)
  //sizes for Brick.js
  const sizes = [
    { columns: 5, gutter: 3 },
    { mq: '768px', columns: 2, gutter: 3 },
    { mq: '1024px', columns: 3, gutter: 3 }
  ]
  //init instance
  this.instance = Bricks({
    container: '.gallery',
    packed: 'packed',
    sizes: sizes
  })
  this.instance.resize(true);  //<-adds a resize event listener
  if (this.state.galleryItems.length > 0) {
    this.instance.pack() //<- This should create the masonry layout
  }
}

componentDidMount（）{
这是一个项目（5）
//Brick.js的大小
常数大小=[
{列：5，边沟：3}，
{mq:'768px'，列：2，槽：3}，
{mq:'1024px'，列：3，槽：3}
]
//初始化实例
this.instance=Bricks({
容器：'.gallery'，
打包：“打包”，
尺码：尺码
})
this.instance.resize（true）；//0）{
this.instance.pack（）//0）{
返回此.instance.pack（）
}
否则{
返回此.instance.update（）//{
返回
})
返回(
主分量
{items}
);
}

问题 如果我在firefox中打开我的应用程序，效果会很好。但是在chrome中，图像正好位于彼此的顶部。如果我调整窗口的大小，砖石结构的布局会很好。我觉得chrome要么太快要么太慢。

---

我的代码有什么问题会发生这种情况？

我遇到了一个非常类似的问题，因为我从包含iFrame的服务器中获取项目。组件的加载速度将快于iFrame的渲染速度，因此砌体组件无法及时获得所有项目的准确高度（导致高度太小；这会使图像相互重叠）。最终对我有帮助的是，在加载我获取的所有项目后重新加载组件。@b为什么解决方案/解决方法是先存储图像的大小，然后创建一个大小正确的div，这样图像就可以加载到帧div中？嗯，这可能行得通？但这也需要大量计算。我的意思是等待所有的I加载mages，然后触发对砖石组件的重新渲染。这样，当砖石组件重新渲染时，它具有其内部所有图像的准确高度。首先测试它是否能够在componentDidMount（）中工作，添加setTimeout（this.forceUpdate，5000）；这将告诉组件在5秒后更新（希望到那时所有的图像都已加载）。如果这解决了您的问题，那么您可以找到一种方法来检测是否已加载所有图像，如果已加载，请重新加载组件

componentDidMount(){
  this.getItems(5)
  //sizes for Brick.js
  const sizes = [
    { columns: 5, gutter: 3 },
    { mq: '768px', columns: 2, gutter: 3 },
    { mq: '1024px', columns: 3, gutter: 3 }
  ]
  //init instance
  this.instance = Bricks({
    container: '.gallery',
    packed: 'packed',
    sizes: sizes
  })
  this.instance.resize(true);  //<-adds a resize event listener
  if (this.state.galleryItems.length > 0) {
    this.instance.pack() //<- This should create the masonry layout
  }
}

componentDidUpdate(){
  if (this.state.galleryItems.length > 0) {
    return this.instance.pack()
  }
  else{
    return this.instance.update() //<- updates the layout
  }
}

render() {
  const items = this.state.galleryItems.map((item, _id) => {
    return <Item key={_id} url={this.state.url + item.url}></Item>
  })
  return (
    <div>
      Home Component
      <div className="gallery">
        {items}
      </div>
    </div>
  );
}