javascript - How do I get Angular Isotope to be fully responsive? -
i trying create responsive version of isotope using angularjs/angular-isotope. have created non-angularjs version utilises jquery (found on stackoverflow , other sources) make columns , items responsive:
$(window).load(function() { var $container = $('#one-column'), margin = 10, colwidth = function () { var w = $container.width(), columnnum = 1, columnwidth = 0; if (w > 1200) { columnnum = 5; } else if (w > 1024) { columnnum = 4; } else if (w > 768) { columnnum = 3; } else if (w > 480) { columnnum = 2; } columnwidth = math.floor(w/columnnum); var $item = $('.story'), width = columnwidth-10 $item.css({ width: width }); var $featured = $('.featured'), dblwidth = columnwidth*2-10 if (w > 480) { $featured.css({ width: dblwidth }); } else { $featured.css({ width: width }); } return columnwidth; }; $(window).on('throttledresize', isotope); });
introducing angular jquery version causes masonry layout sporadically load or not load - no errors, have used mankindsoftware's angular isotope load items , filter accordingly - loads every time. on initial load items fixed height , columns adaptive rather responsive. cannot seem figure out how can flexibly change column widths based on resizing , make columns , isotope items responsive.
does have experience doing this?
Comments
Post a Comment