###前提・実現したいこと
Jquery「Masonry」に1カラムの行を設けたい。
現在、xhtmlで写真がレンガ状に並ぶようJquery「Masonry」を用いてページを作っています。横幅100%で作っています。
基本は、画像の幅が固定、高さ可変のものが並ぶので画面幅によって、カラム数は変わってきます。
ここまではきちんと再現できたのですが、途中に1カラム(width100%)のものを挟みたいという要望があるのですが、1カラムの部分だけ左右の余白がうまくいきません。
それだったら、1カラムの部分は、その他の複数カラムの幅に合わせたいと思うのですがなかなかうまくいかず困っております。
###現状
・1カラムの部分を除いては正しく動いている。
・1カラムの部分の左右の余白が正しく設定されない。
・ロードした時は良いが、画面の幅を縮めると、1カラムの下の余白が200px近く開き、
画面幅を元に戻してみると、1カラムの部分の高さが無視されて、1カラムの下の行が重なって表示される。
すべては1カラムの部分がなければ正常に動くのですが、1カラムの部分を入れたいがために苦労をしています。。。
###該当のソースコード
ざっくりと必要と思われる部分を抜粋します。
こちらでは1枚目のph1.jpgが1カラムで表示したい画像の想定です。
●html● <!-- masonry --> <script type="text/javascript" src="../../js/masonry.pkgd.min.js"></script> <script type="text/javascript" src="../../js/imagesloaded.js"></script> <script type="text/javascript"> $(window).load(function(){ var $container = $('#photos'); $container.imagesLoaded(function(){ $container.masonry({ itemSelector: '.p_box', isFitWidth: true, isAnimated: true, columnWidth: 316 }); }); }); </script> <div id="photos_wrap"> <div id="photos"> <div class="p_box col1"> <a href="#"><img src="../../img/gallery/ph1.jpg" alt="" /></a> ↑このこだけwidth100%で他の行と同じになるように左右に余白を入れたいです。 </div> <div class="p_box"><a href="#"><img src="../../img/gallery/ph2.jpg" alt="" /></a></div> <div class="p_box"><a href="#"><img src="../../img/gallery/ph3.jpg" alt="" /></a></div> <div class="p_box"><a href="#"><img src="../../img/gallery/ph4.jpg" alt="" /></a></div> <div class="p_box"><a href="#"><img src="../../img/gallery/ph5.jpg" alt="" /></a></div> <div class="p_box"><a href="#"><img src="../../img/gallery/ph6.jpg" alt="" /></a></div> </div> <!-- /#photos --> </div> <!-- /#photos_wrap -->
●css● #photos_wrap { padding-top: 50px; width: 100%; text-align: center; } #photos{ width: 100%; display: inline-block; } .p_box { float: left; width: 310px; padding: 3px; } .col1 { width: 100%; float: left; display:block; margin-bottom:0 !important; } .p_box img{ width: 100%; height: auto; } .col1 img{ width: 100%; }
イメージとしては下記のような感じです。
###追加の問題
kei344様からご回答いただいた通り、masonry を複数使うことで
1カラムの部分がきれいに100%になる様になりました!
が、私自身も認識の誤りがあったのですが、1カラムの部分は、下のカラムと
幅を合わせたいです。
jquery,javascriptの知識がないに等しいのですが、
下記で簡単に取得できそうなものなのですが、うまくいきません。
<#photos→ 複数カラムのwrap、#photos2→ 1カラムのwrapです。>
$(function(){ var w=$("#photos").width(); $("#photos2").width(w); });
ブラウザを広げるとサイズによっては下記のような感じになるので、#photos、#photos2のmarginを合わせられたらと思っております。
どの様にコードをかけば、きちんと#photosの幅を取得して、#photos2に取得することができるのでしょうか?
teratailを使い始めて間もないので、
エンジニアの方たちに不快な思いをさせてしまうかもしれません。
またteratailにおいて本質問がお門違いでしたらすみません。
何卒よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/09/08 02:55
2016/09/08 12:28
2016/09/08 13:22
2016/09/09 03:39
2016/09/09 05:50
2016/09/12 01:47
2016/09/12 04:37
2016/09/13 03:26