5

さまざまなサイズのレイアウトをカバーするメディアクエリを使用してサイトを設計しています。私は石積みでフルサイズの幅でたくさんのフロートを整理していますが、問題ありません。可動幅では、すべてのフロートがフロートを解除し、互いに積み重ねられます。したがって、768px <= width <= 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>

これはまだ機能しませんが、すべてのサイズ変更で実行したくありません...ブレークポイントでのみ実行します。

4

2 に答える 2

5

これらの場合には、MasonaryのisResizableオプションを使用できます。

  $container.masonry({
    itemSelector: '.box',
    isResizable: true
  });
于 2012-04-06T15:49:03.633 に答える
4

私がやろうとしていたことに対するより良い解決策はIsotopeと呼ばれ、サイズ変更でよりうまく機能します

http://isotope.metafizzy.co/

于 2011-06-13T15:39:56.197 に答える