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

Popular posts from this blog

c++ - No viable overloaded operator for references a map -

java - Custom OutputStreamAppender not run: LOGBACK: No context given for <MYAPPENDER> -

java - Cannot secure connection using TLS -