Blog

HOME > Web > JQuery > 【jQuery】masonryでの重なりを修正

【jQuery】masonryでの重なりを修正

2016/04/08

JQuery

要素をブロックで隙間なく並べる便利なjQueryのmasonryですが、
chromeやsafariで要素が重なってしまう不具合があります。

色々と調べたところ、要素が表示される前に、
masonryが高さを計算してしまうのが原因でした。

いくつかの参考サイトからタグを拝借して修正をしました。

参考サイト
【jQuery】［Masonry］の表示の不具合を解消するために［imagesLoaded］を併用する方法。

jQuery Masonryを使う際にわりと大事なimagesLoadedプラグイン

WordPressでjQuery Masonry使ったら重なっちゃった時の解決方法

まずimagesLoadedをダウンロード

<head>～</head>に記述

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="/js/jquery.masonry.min.js"></script>
<script src="/js/jquery.imagesloaded.min.js"></script>

下記を記述

<script type="text/javascript">  
$(window).load(function(){
var $container = $('#masonry');
$container.imagesLoaded(function(){
	$container.masonry({
                itemSelector: '.box',
                isFitWidth: true,
                isAnimated: true
	});
});
});
</script>

#masonryと.boxは実際のcssに合わせてください。



カテゴリー

月間アーカイブ

«前の記事

一覧に戻る

次の記事»

最近の投稿

人気の記事

MORE

ミュージシャンズ・プラザ

神社仏閣ホームーページ制作

ホームページ制作問合せ