javascript – Masonry – load it again after applying filters to the result

Question:

Next I have a page where I apply the masonry.js plugin masonry.js this page I have a content filter, the problem is the following when I open the page, everything is ok I have two columns of card with an x spacing between them, however after applying the filter it clears all elements from the screen and returns me only the filtered elements and in this procedure the masonry crashes causing the x spacing between columns to decrease ouuuu even making the cards one below the other in only one column. I am unable to get masonry to start again after filtering.

The code is as follows:

var refreshFeed = function(month, studentId, materialName, programId, page) {
    console.log(materialName);
    clearFeed();

    var tempFeed = feed.sort(predicatBy("build_at"));

    var numWorks = 6;

    var filteredFeed = [];

    $.each(tempFeed, function( index, value ) {

      var build_at = formatDatetime(value.build_at);

      if ((month == 0 ) || (month == build_at[1])) {
        if ((programId == 0 ) || programId == value.program_id){
          if ((materialName == "") || materialName == value.material.name) {
            if ((studentId == 0)) {
              filteredFeed.push(value);
            }else {
              $.each(value.work_students, function( index, work_student ) {
                if(work_student.student != null ) {
                  if(work_student.student.id == studentId) {
                    filteredFeed.push(value);
                  }
                }
              });
            }
          }
        }
      }
    });

    if (page == undefined) {
      page = 0
    };
    var finalFeed = pagination(filteredFeed, numWorks, page)

    $.each(finalFeed, function( index, value ) {
      createWorkArticle(value, month, studentId);
    });


  }

And to call masonry I use the code:

    var $container = $('#container-masonry');
    // initialize
    $container.imagesLoaded( function() {
      $container.masonry({
        columnWidth: 540,
        itemSelector: '.item',
        isFitWidth: true,
        gutter: 60
      });
    });

The question is, how do I load the plugin again after applying the filter?

I don't know if it was clear, but anything I try to improve the question.

Answer:

Put this inside a function:

function chamaMasonry(){

 var $container = $('#container-masonry');
    // initialize
    $container.imagesLoaded( function() {
      $container.masonry({
        columnWidth: 540,
        itemSelector: '.item',
        isFitWidth: true,
        gutter: 60
      });
    });

}

Call this function when loading the page and call it in the filter function.

Scroll to Top