Q&A
###前提・実現したいこと
以前こちらの質問で実装したjavascriptを実際にサイトに組み込んでみたのですが、表示崩れ(画像同士が重なって表示される)が起こってしまいました。
どなたかどこに問題があるか助言していただけると幸いです。
###発生している問題・エラーメッセージ
エラーメッセージは表示されていませんでした。
###該当のソースコード
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>FROM ME TO "?"</title> <link rel="stylesheet" type="text/css" href="css/portfolio.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="js/isotope.pkgd.min.js"></script> </head> <body> <!-- main --> <div class="wrapper"> <div class="main"> <div class="about"> </div> <div class="content"> <!-- フィルタリングされる要素 --> <div class="isotope"> <!-- web --> <div class="item web from-me-to"><a href="manuhamu.html"><img src="images/manuhamu.png" target="_blank" /></a></div> <div class="item web"><a href="belle.html"><img src="images/belle1.png" target="_blank" /></a></div> <div class="item web"><a href="fareast.html"><img src="images/fareasttop.png" target="_blank" /></a></div> <div class="item web from-me-to"><a href="geisai2013.html"><img src="images/geisai2013.png" target="_blank" /></a></div> <div class="item web from-me-to"><a href="geisai2014.html"><img src="images/geisai2014.png" target="_blank" /></a></div> <!-- イラスト --> <div class="item illust"><a href="curry.html"><img src="images/curry.png" target="_blank" /></a></div> <div class="item illust"><a href="ekimemo.html"><img src="images/asa.png" target="_blank" /></a></div> <div class="item illust"><a href="bemani.html"><img src="images/green.png" target="_blank" /></a></div> <div class="item illust from-me-to"><a href="noctie.html"><img src="images/noctie.png" target="_blank" /></a></div> <div class="item illust from-me-to"><a href="vutter.html"><img src="images/tou.png" target="_blank" /></a></div> <!-- 刺繍 --> <div class="item embroidery"><a href="brooch.html"><img src="images/brooch.jpg" target="_blank" /></a></div> <div class="item embroidery from-me-to"><a href="yoho.html"><img src="images/yoho.jpg" target="_blank" /></a></div> <!-- その他 --> <div class="item other"><a href="intern.html"><img src="images/intn2.jpg" target="_blank" /></a></div> <div class="item other"><a href="map.html"><img src="images/map.png" target="_blank" /></a></div> </div> </div> </div> <!-- サイドバー --> <div class="side"> <img class="icon" src="images/ribon.png" alt="" /> <!-- フィルターきりかえボタン --> <div class="filter"> <ul> <li><a href="#" style="color:#E04462;"data-filter=".from-me-to">FROM ME TO ...</a></li> <li><a href="#" data-filter=".web">WEB</a></li> <li><a href="#" data-filter=".illust">ILLUSTRATION</a></li> <li><a href="#" data-filter=".embroidery">EMBROIDERY</a></li> <li><a href="#" data-filter=".other">OTHER</a></li> <li><a href="#" data-filter="*" class="current">ALL</a></li> </ul> </div> <div class="menu-profile"> <a href="profile.html" style="color:#fff;">ABOUT ME</a> </div> </div> </div> <script> // Isotopeの初期化設定 $(function() { var $container = $('.isotope'); $('.isotope').isotope({ itemSelector: '.item', masonry: { columnWidth: 100 } }); // フィルタリングさせる $('.filter a').click(function() { $('.filter .current').removeClass('current'); $(this).addClass('current'); var selector = $(this).attr('data-filter'); $container.isotope({ filter: selector, animationOptions: { duration: 750, easing: 'linear', queue: false } }); return false; }); }); </script> </body> </html>
###補足情報
実際に作っているサイトはこちらです。
表示崩れがどのような感じなのかわかるかと思います。
左のALLをクリックすると、もともと表示してほしかった状態に正しく配置されます。
回答1件
0
ベストアンサー
javascript
1 <script> 2 // Isotopeの初期化設定 3 $(function() {
上記を 画像データを読み込んだ後にjavascriptが実行されるように
javascript
1 <script> 2 // Isotopeの初期化設定 3 $(window).load(function () {
として見てはいかがでしょう？
投稿2016/06/01 07:07
編集2016/06/01 07:12
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/06/01 07:40