Zilele trecute a trebuit să lucrez la un site responsive ce folosea Isotope (mai bine zis masonry) pentru layout. Problema era că aveam un număr diferit de coloane, în funcție de rezolutie: trei coloane pentru mai mult de 1000px lățime, două pentru intervalul 501-999px și una pentru ce era sub 500px. Desigur, în caz de resize, numărul de coloane ar fi trebuit să se ajusteze corespunzător.
Prima idee care mi-a trecut prin cap a fost:
function getNumberOfColumns() { var windowWidth = $(window).width(); if( windowWidth <= 500 ){ return 1; }else if ( windowWidth > 500 && windowWidth < 1000 ){ return 2; }else { return 3; } } $(window).on('resize', function(){ var tiles = $('#tiles'); tiles.isotope({ masonry: { columnWidth: tiles.width() / getNumberOfColumns() } }); });
E o soluție aproape bună. Ce probleme apar? Citeste mai departe »