これがここに数回投稿されているのを見たことがありますが、どちらも機能する解決策がありませんでした.
jquery masonryを使用して、内部に画像とキャプションを含む多くの div をレイアウトしています。
「height:auto;」を設定しました 石積みの各アイテムの css 用。ウィンドウが読み込まれると、石積みが有効になり、コンテンツが適切にレイアウトされると予想していました。残念ながら、4 列でロードされますが、画像の高さがすべて重なっています。cssの高さをpxで設定すると機能しますが、ウェブサイトはレスポンシブであり、各メディアクエリで css の高さを変更したくないため、できれば自動で高さが必要です...
どんな助けにも感謝します:)
ありがとう
JS コードは次のとおりです。
$(window).load(function()
{
var columns = 4,
setColumns = function() { columns = $( window ).width() > 700 ? 4 : $( window ).width() > 480 ? 2 : 1 };
setColumns();
$( window ).resize( setColumns );
$( '#container' ).masonry(
{
itemSelector: '.item',
gutterWidth: 66,
isFitWidth: true,
isAnimated: true,
columnWidth: function( containerWidth ) { return containerWidth / columns; }
});
});