ブロックからモザイクを構築するためのjQueryプラグイン

こんにちは おそらくこれは最も有用な記事ではありませんが、サイトがブロックを「モザイク」に組み込む必要があり、常にあらゆる種類の自転車を発明するという事実に出くわしました。



jQuery用のプラグインの作成に関するチュートリアルを読んだ後、私の問題を解決するこの記事を書くことにしました。

まず、jQueryプラグインを作成しましょう。

(function( $ ) { $.fn.mozaika= function() { }; })(jQuery);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ほとんどのプラグインと同様に、設定があります。 それらを定義しましょう：

• 投稿数
• ブロック間インデント
• 「パズル」のあるフィールドの上下のフィールド（パディング）
• ブロックのクラス
• 倍幅ブロックのクラス
• トリプル幅ブロックのクラス
• 下部パディングセル

私たちは持っています

 (function( $ ) { $.fn.mozaika= function() { var set = $.extend( { 'n': 4, 'margin': 4, 'padding' : 30, 'item' : 'item', 'citem2' : 'item-w2', 'citem3' : 'item-w3', 'itembot' : 0 }, options); }; })(jQuery);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

各列の高さの配列を作成します。

 var cols = new Array() //     for(i = 0; i < set.n; i++) cols[i] = 0;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

モザイク要素の幅を見つける：

 var width = this.width(); //    
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次のステップは、1つのセルの幅を計算することです（通常の幅で）：

 var one = (width - set.margin * (set.n - 1))/set.n; //    var left = 0; //   
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次のステップは、すべてのセルを見つけて「パズル」を作成することです。 これを行うには、セルがダブル幅またはトリプル幅のセルであるかどうかを確認します。 突然、2倍の幅を持つ要素が4番目の列に構築される場合、最初の要素に転送する必要があります。 また、非単一幅の場合は、大きい列の一番下にセルを構築する必要があります。 したがって、影響を受ける列の最大の高さを見つけます。



次に、セルの座標を設定します。



次のステップは、列の新しい高さと、x軸に沿った新しい座標を書き込むことです。 行が終わったら、新しい行に移動します。 最後に-セルのブロックの高さを設定します。

 (function( $ ) { $.fn.mozaika= function(options) { var set = $.extend( { 'n': 4, 'margin': 4, 'padding' : 30, 'item' : 'item', 'citem2' : 'item-w2', 'citem3' : 'item-w3', 'itembot' : 0 }, options); var cols = new Array() //     for(i = 0; i < set.n; i++) cols[i] = 0; var width = this.width(); //     var one = (width - set.margin * (set.n - 1))/set.n; //    var left = 0; //    var moz = this.children('.'+set.item); //  i = 0; $(moz).each(function( k, v ) { if($(v).hasClass(set.citem2)){ w = one*2+set.margin; q=2; }else if($(v).hasClass(set.citem3)){ w = one*3+set.margin*2; q=3; }else{ w = one; q = 1; } if(i+q>set.n){ i = 0; } var mx = cols[i]; var mn = i; for(e = i; e <i+q; e++) if(cols[e] > mx){ mx = cols[e]; mn = e; } $(v).css({'position':'absolute', 'width' : w+'px'}); $(v).css({'left' : left+'px', 'top':mx, 'padding-bottom':set.itembot}); $(v).animate({opacity:1},1000); hg = cols[i]; for(e = i; e < i+q; e++){ cols[e] = hg + $(v).height() + set.margin + set.itembot; //console.log('n ' + i + ' q ' + q + ' cols[' + e + '] ' + cols[e]); } left = left + set.margin + w; i = i+q; if(i>=set.n){ i=0; left = 0; } }); mx = cols[0]; for(e = 0; e <set.n; e++) if(cols[e] > mx){ mx = cols[e]; } if(this.height()<(mx+set.padding*2)) this.height(mx+set.padding*2); }; })(jQuery);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

私たちは電話します：

 $(document).ready(function(e) { $(".catalog").moZaika({ 'n': 4, 'margin': 2, 'item' : 'cat-item', 'citem2' : 'cat-w2', 'citem3' : 'cat-w3', 'itembot' : 20, 'padding' : 0 }); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

完了、動作します！







残っているのは、モザイクのフィールド幅を変更するときに再構築することだけです。 これを行うには、とりあえず$（window）.resize（）でもう一度プラグインを呼び出します。