0

ドキュメントの計算変数を準備するのに問題があります。

コンテナーの幅を数値で割り、この値を保存してから使用する必要があります。

ここでスクリプト：

$(document).ready(function() {

var $layout = $('.container-scroll');
var $container = $('#container');
var $items = $('.element');
var $filter = $('#filter a');

function checkWidth() {

var windowSize = $(window).width(); 

if (windowSize <= 960) {    
    var $layout = $('.container-scroll');
    var colW = Math.round(($layout.width())/3)-1;       
    var ElementWidth = colW;
    var ElementHeight = Math.round(colW*0.6);
    $(".element").height(ElementHeight);
    $(".element").width(ElementWidth);  
    $(".element.square").height(ElementHeight * 2);
    $(".element.square").width(ElementWidth * 2);
    $(".element.wide").height(ElementHeight);
    $(".element.wide").width(ElementWidth * 2);
}
else if (windowSize > 960 && windowSize <= 1280 ) {
    var $layout = $('.container-scroll');
    var colW = Math.round(($layout.width())/4)-1;       
    var ElementWidth = colW;
    var ElementHeight = Math.round(colW*0.6);
    $(".element").height(ElementHeight);
    $(".element").width(ElementWidth);  
    $(".element.square").height(ElementHeight * 2);
    $(".element.square").width(ElementWidth * 2);
    $(".element.wide").height(ElementHeight);
    $(".element.wide").width(ElementWidth * 2);
}
else if (windowSize > 1280 && windowSize <= 1600 ) {
    var $layout = $('.container-scroll');
    var colW = Math.round(($layout.width())/5)-1;   
    var ElementWidth = colW;
    var ElementHeight = Math.round(colW*0.6);
    $(".element").height(ElementHeight);
    $(".element").width(ElementWidth);  
    $(".element.square").height(ElementHeight * 2);
    $(".element.square").width(ElementWidth * 2);
    $(".element.wide").height(ElementHeight);
    $(".element.wide").width(ElementWidth * 2);
}
else if (windowSize > 1600 ) {
    var $layout = $('.container-scroll');
    var colW = Math.round(($layout.width())/6)-1;   
    var ElementWidth = colW;
    var ElementHeight = Math.round(colW*0.6);
    $(".element").height(ElementHeight);
    $(".element").width(ElementWidth);  
    $(".element.square").height(ElementHeight * 2);
    $(".element.square").width(ElementWidth * 2);
    $(".element.wide").height(ElementHeight);
    $(".element.wide").width(ElementWidth * 2);
}
}

function checkIsotope() {
$container.isotope({
    perfectMasonry: {
    columnWidth: colW,
    rowHeight: colW,
    },
    masonryHorizontal: {
    rowHeight: colW,
    }
});
}

checkWidth();
checkIsotope();
var colW;
alert(colW)

$(window).smartresize(function() {
    checkWidth();
    checkIsotope()
})

}

同位体レイアウトで columnWidth と rowHeight を定義するために、var colW を取得したいと考えています。

colW にアラートを設定すると、colW は未定義です...

4

1 に答える 1

2

var colW ローカル変数です

これを関数の外に移動してみてください

次のように変数を定義します。

var colW;
$(document).ready(function() {
......

これを関数で使用します

colW = Math.round(($layout.width())/4)-1;

この var を今すぐアラートに使用できるはずです。

于 2013-04-12T22:24:31.687 に答える