Masonry - load it again after applying filters on the result

Asked

Viewed 37 times

3

Next I have a page where I apply the plugin masonry.js on that page I have a content filter, the problem is the following when I open the page this all ok I have two columns of card with a spacing x between them, however after application of the filter it cleans all the elements of the screen and returns me only the filtered elements and in this procedure the masonry stops working making the spacing x between the columns decrease or even cause the cards to be below each other in only one column. I’m not getting masonry started again after filter.

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 the 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 filter application?

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

javascript

1 answer

2

Puts 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 you load the page and call it in the filter function.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.