3

jQuery Masonry の Web サイトには、ビヨンセの Web サイトがショーケースに含まれています。

http://iam.beyonce.com

しかし、彼女が自動サイズ変更効果をどのように達成したかは示されていません。私は prettifier を通して彼女のコードを実行しましたが、それでも非常に乱雑に見えます:

function resize() {
  1024 < $(window).width() ? 0 == headerNavOpen && $("#header").css({left:-$(window).width()}) : 0 == headerNavOpen && $("#header").css({left:-1024});
  $(".index .post.video").css({width:"33.2%", height:0.332 * $("#container").width() / 1.778})
}

同じ効果を達成する簡単な方法を知っている人はいますか?

基本的なセットアップのフィドルは次のとおりです。http://jsfiddle.net/CfsEb/

4

2 に答える 2

8

http://metafizzy.co/blog/beyonce-seamless-fluid-image-masonry/を参照してください

Designedmemoryは、はるかに優れたソリューションを考え出しました。レイアウトで正確に3列を取得しようとする代わりに、列のサイズは理想よりもわずかに小さくなります。次に、画像はギャップをカバーするために少し大きくなるようにサイズ設定されます。素晴らしい！

/* not quite 33.3% */
.item { width: 33.2%; }

/* images cover up the gap */
.item img { width: 100.5%; }
于 2013-02-03T20:29:11.123 に答える
1

彼らがやっていることは実際には非常に基本的なもので、配置には既存のフレームワークを使用しており、画面が 1024 未満の場合は CSS を交換して幅をパーセンテージで制御しています。投稿されたコードを見ると...

// Short Hand Version   
 function resize() {
      1024 < $(window).width() ? 0 == headerNavOpen && $("#header").css({left:-$(window).width()}) : 0 == headerNavOpen && $("#header").css({left:-1024});
      $(".index .post.video").css({width:"33.2%", height:0.332 * $("#container").width() / 1.778})
    }

// In more plain script
if ($(window).width() > 1024) {
   0 == headerNavOpen; 
   $("#header").css({left:-$(window).width()});
} else {
   0 == headerNavOpen;
   $("#header").css({left:-1024});

   // This is the actual part that reduces image sizes dynamically.
   $(".index .post.video").css({width:"33.2%", height:0.332 * $("#container").width() / 1.778})
}

したがって、上記のコードは 2 つのことを行い、ナビゲーションを調整し、個々の「投稿」を調整します。これは、jQuery が実行している DOM 操作とは完全に別のものです。これは、単に便乗していると考えてください。ただし、小さな画面の場合は、このように動作するだけです。したがって、これが常にこのように動作するようにしたい場合は、目的を達成する % を使用して dom 要素にクラスを追加するだけです。それ以外の場合は、上記のコードのようにウィンドウ チェックを実行できます。不要な部分を省略してください。

于 2013-02-03T17:32:12.470 に答える