2

絶対にこれで私の髪を引っ張ります。GitHubで提供されている白黒のソリューションはないようです。これは奇妙です。なぜなら、それはかなり単純な概念のように思えるからです。たぶん、私はそれを理解していません。

基本的に、私は流動的でレスポンシブなポートフォリオを作成しようとしています.Isotopeを使用してアイテムをフィルタリングしています. フィルタリングは正常に機能し、4 つの列は完全に流動的で、ウィンドウのサイズを変更するとすべてが見栄えがします。

ただし、モバイルおよびタブレット レイアウトの場合は、4 列のレイアウトから2列のレイアウトに変更するだけです。

私はこれを試しました：

$(window).load(function(){

    var $container = $('#thumbs');
    $container.isotope({
        filter: '*',
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false,
       },
    });

    // initialize Isotope
    $container.isotope({
      // options...
      resizable: false, // disable normal resizing
      // set columnWidth to a percentage of container width
      masonry: { columnWidth: $container.width() / 4 },
    });

    // update columnWidth on window resize
    $(window).smartresize(function(){
        $container.isotope({
            // update columnWidth to a percentage of container width
            masonry: { columnWidth: $container.width() / 4 }
        });
    });

// My attempt at using media queries to change 'columnWidth'
    $(window).resize(function() {
        var width = $(window).width();
        if (width < 768) {
            $container.isotope( {
                // update columnWidth to half of container width
                masonry: { columnWidth: $container.width() / 2 }
            });
        }
    });
});

うまくいきませんでした:(

どんな助けでも大歓迎です。

4

2 に答える 2

2

これは、列数を設定するために機能するはずです。次に、で除算しcolumnsます。

var columns;

// set column number
setColumns();

// rerun function when window is resized 
$(window).on('resize', function() {
  setColumns();
});

// the function to decide the number of columns
function setColumns() {
  if($(window).width() <= 768) {
    columns = 2;
  } else {
    columns = 4;
  }
}
于 2012-10-17T22:19:35.280 に答える