Angular 2+ 的砌体替代品答案

【问题标题】：Masonry alternative for Angular 2+Angular 2+ 的砌体替代品
【发布时间】：2018-01-07 16:03:25
【问题描述】：

我正在使用最新 Angular 版本 (v5.1.3) 的项目中与 angular2-masonry 合作，我一直在寻找 Masonry 和其他替代方案以在我的应用程序中实现。我尝试了多个，但我不喜欢实施。我尝试做一个原生 CSS 砌体，但我需要从左到右对内容进行排序。

那么，问题是，在 Angular 和 Masonry 中是否有很好的集成方式？谢谢！

【问题讨论】：

标签： angular masonry angular-masonry

【解决方案1】：

我终于做到了！我已经根据Andy Barefoot给出的解决方案实现了一个解决方案，可以查看in this CodePen。我创建了a Gist，展示了我是如何在我的 Angular 应用程序中实现它的。诀窍在于 CSS 和 JS：

CSS：

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(250px,1fr));
  grid-auto-rows: 20px;
}

JS：

function resizeGridItem(item){
  grid = document.getElementsByClassName("grid")[0];
  rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-auto-rows'));
  rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-row-gap'));
  rowSpan = Math.ceil((item.querySelector('.content').getBoundingClientRect().height+rowGap)/(rowHeight+rowGap));
    item.style.gridRowEnd = "span "+rowSpan;
}

function resizeAllGridItems(){
  allItems = document.getElementsByClassName("item");
  for(x=0;x<allItems.length;x++){
    resizeGridItem(allItems[x]);
  }
}

function resizeInstance(instance){
    item = instance.elements[0];
  resizeGridItem(item);
}

window.onload = resizeAllGridItems();
window.addEventListener("resize", resizeAllGridItems);

allItems = document.getElementsByClassName("item");
for(x=0;x<allItems.length;x++){
  imagesLoaded( allItems[x], resizeInstance);
}

【讨论】：