質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.99%

Jquery「Masonry」に1カラムの行を設けたい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,565

前提・実現したいこと

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において本質問がお門違いでしたらすみません。

何卒よろしくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

masonry を複数使って、幅100% の要素を挟んでは?

<div id="photos1"><!--  --></div>
<div class="w100"><!-- 全幅 --></div>
<div id="photos2"><!--  --></div>

追記:

こういう設定があるようです。

【レスポンシブWebデザイン制作にjQuery Masonryを利用するための5つのポイント: 小粋空間】
http://www.koikikukan.com/archives/2012/10/19-015555.php

4.カラムレイアウト幅を要素全体の幅に追従させる
カラムレイアウトの幅を要素全体の幅に追従させるためには、プラグイン起動時のオプションとして「isFitWidth」を設定します。

$('#container').masonry({
    isFitWidth: true,
});

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/09/12 10:47

    >kei344さま

    度々のご回答ありがとうございます!
    こちらこそ、確認が遅くなってしまいまして申し訳ありません。

    masonryの仕様のせいなのか、私のjavascriptの知識のなさのせいなのか
    幅は同じになりませんでした汗

    teratailさんよりベストアンサーを選んでくださいとのことで、時間切のようですので、
    また自分でもjavascriptの勉強をして出直します!

    kei344さまの度々のご協力とお心遣いに感謝です。
    ありがとうございました!

    キャンセル

  • 2016/09/12 13:37

    そういう通知が行くようになったのですね。
    ですが解決していないなら無理に解決済にする必要もないと思います。

    状況がこちらで再現できないので、全てのHTML/CSS/jsを質問文に追記いただくか、コメント欄にURLを載せてもらうかどちらかがあれば何とかできるとは思います。

    キャンセル

  • 2016/09/13 12:26

    >kei344さま

    度々のお気遣いありがとうございます。コメントのメッセージ通知がメールで届くとばかり思っていたので、気付かずに大変失礼いたしました!

    teratailさんから通知が来たので、yahoo知恵袋のように期限があるものと思い、解決済みとさせていただきました。

    kei344さまから回答いただいても幅の取得ができなかったので、”stamp”というオプションで再現をしようとしたのですが、
    http://codepen.io/kobataba/pen/ZpbyOd
    上記の通り、ブラウザを小さくしたり、大きくしたりすると挙動がおかしくなるみたいでしてstampでも無理そうでした。

    幅固定(px指定)というところがネックになっていたので、悔しいところではありましたがそこまで時間をかけることでもないという話になり、結局相対指定(%指定)にしました。
    いろいろとお知恵をお貸しいただいたのに、諦める形となってしまい申し訳ありません。

    ie9まで対応させるのに、masonry、imageloaderともにv3でないと正しく動作しないということに気づくまで約1日かかりましたが、何とか見られる形にはなりました。

    お力をお貸しいただきまして本当にありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.99%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る