Angular 2+的砌體替代品

Question

我正在使用最新的Angular版本（v5.1.3）在一個項目中使用angular2-masonry我正在尋找砌體和其他替代方案來實現我的應用程序。 我嘗試了多個，我不喜歡實現。 我嘗試做一個原生的CSS砌體，但我需要從左到右訂購內容。

那么，問題是，在Angular和Masonry中有一個完整的替代方案嗎？ 謝謝！

Answer 1

最后我做到了！ 我已經實現了基於Andy Barefoot給出的解決方案的解決方案，可以在此CodePen中進行檢查。 我創建了一個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);
}