angularmasonryangular-masonry

Masonry alternative for Angular 2+


I'm working with angular2-masonry in a project with the latest Angular version (v5.1.3) I have being looking for Masonry and other alternatives to implement in my aplication. I tried multiple ones and I didn't like the implementation. I tried doing a native CSS masonry but I need to order the content from left to right.

So, the question is, there is an alternative well integrated in Angular to Masonry? Thanks!


Solution

  • Finally I have done it! I have implemented a solution based on the solution given by Andy Barefoot, can be checked in this CodePen. I have created a Gist showing how I implemented it in my Angular app. The trick is in the CSS and JS:

    enter image description here

    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);
    }