Question

J'ai mon site conçu avec des requêtes de médias pour couvrir les mises en page différentes tailles. J'ai organiser la maçonnerie d'un tas de flotteurs à la largeur de taille, pas de problème. les largeurs mobiles, tous les flotteurs, unfloat et juste pile au-dessus de l'autre. donc je dois seulement la maçonnerie réexécution lorsque le site redimensionne à la disposition de la tablette lorsque 768px <= largeur <= 1000px.

<script type="text/javascript">
//<![CDATA[

    $(document).ready(function($){

        $('ul.xoxo').masonry({ singleMode: true, itemSelector: '.widgetcontainer'  });

        //If the User resizes the window, adjust the #container height
        $(window).bind("resize", resizeWindow);
        function resizeWindow( e ) {
            var newWindowWidth = $(window).width();

            if(newWindowWidth<1008){
                $('ul.xoxo').masonry();
            } else {
                $('ul.xoxo').masonry();
            }
        }

    });

/* ]]> */
</script>

qui ne fonctionne pas pour moi encore, mais aussi je ne veux pas courir sur tous redimensionne ... juste aux points de rupture.

Était-ce utile?

La solution 2

une meilleure solution pour ce que je tentais de faire est appelé Isotope, qui fonctionne mieux sur Redimensionner

http://isotope.metafizzy.co/

Autres conseils

Vous pouvez utiliser l'option de isResizable Masonary pour ces cas.

  $container.masonry({
    itemSelector: '.box',
    isResizable: true
  });
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top