これについて昨日投稿しましたが、混乱が生じているようです。そのため、もう一度投稿しますが、今回はより明確にしようとします。
私はこのワードプレス テーマの大ファンです: http://prothemeus.com/demo/litho/次の理由から:
- ブラウザ ウィンドウを常に 100% 満たすようにコンテンツ タイルを配置およびスケーリングします。
- ブラウザー ウィンドウのサイズを変更すると、これらのタイルが再配置および再スケーリングされるため、ブラウザー ウィンドウ全体が 100% いっぱいになります。
- ブラウザー ウィンドウのサイズを変更すると、タイルの動きが滑らかになります。タイルの間に隙間ができず、とてもいいアクションです。私が大好きです。
- タイルは、幅 240 ピクセルなど、一定の量よりも小さくなることはありません。240px 未満になると、グリッドはタイルを再シャッフルして、各行のタイル数を減らします。(これを説明するのは難しいですが、ブラウザ ウィンドウのサイズをいじってみてください。私の言いたいことがわかると思います)
このテーマについて私にとってうまくいかないこと：
- さまざまなサイズのコンテンツ タイルを表示できません。特定の投稿に注目を集めたいので、これは私にとって重要です。具体的には、注目の投稿タイルは、通常の投稿タイルの幅と高さの 2 倍です。
その結果、Litho テーマの JavaScript を削除し、ノードとコンテナーの名前を変更するなどして、テーマをカスタマイズしました。そして、すべてを Packery ライブラリに置き換えました。これにより、コンテンツ タイルが配置されます。
$(document).ready( function() {
var $container = $('#grid');
// init
$container.packery({
itemSelector: '.grid-item',
columnWidth: 240,
});
});
ただし、これによりさまざまなサイズのコンテンツを使用できますが、流動的な配置が失われています。
Packery が Litho テーマが元々持っていたのと同じ効果を再現できる方法はありますか?
私は周りを見回しましたが、私が見つけた最も近いものはこれです：
http://codepen.io/desandro/pen/BEJhd
ただし、まったく同じ動きではなく、はるかにぎこちなく、見た目も美しくありません. タイル間に重なりがあるか、タイル間にギャップが形成されます。
違いは、最初にすべてのタイルが再スケーリングされ、その後一度だけ再配置されることだと思います。一方、リソ テーマでは、タイルのサイズ変更と再配置が同時に行われるため、はるかに見栄えがよくなります。
次に、タイルの最小サイズはありません。ブラウザー ウィンドウのサイズを変更すると、タイルは縮小するだけです。
(これらのアクションはブラウザーによって若干異なる場合がありますが、これは私の Mac で Safari、Firefox、および Chrome を使用して表示されるものです)
だから私の質問は、Litho テーマの再配置と再スケーリングのアクションを再現できる方法はありますか? ただし、Packery ライブラリを使用していますか? Packery ライブラリはこれを許可していますか?
ありがとうございました