Next I have a page where I apply the masonry.js plugin on this page I have a content filter, the problem is the following when I open the page everything is ok I have two card columns with a x spacing between them after applying the filter it clears all elements of the screen and returns me only the filtered elements and in this procedure the masonry stops working making the x spacing between the columns decreases ouuuu even causing the cards to be one below another in only one column. I can not get masonry started again after the 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 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 do not know if it was clear, but anything tries to improve the question.