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

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

ただいまの
回答率

90.51%

  • JavaScript

    20334questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    11446questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    8133questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS3

    2614questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

  • XHTML

    37questions

    XHTMLは、eXtensible HyperText Markup Languageの略であり、SGMLベースであるHTMLとは違って、有効なXMLドキュメントにもなるHTMLアプリケーションです。XMLベースのツールを用いて生成されるHTMLページのためによく使われるマークアップ言語です。

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

解決済

回答 1

投稿 編集

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

前提・実現したいこと

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/08 11:55

    >kei344さま

    早々にご回答いただきまして誠にありがとうございます!
    masonry を複数使うというところに目が行きませんでした。
    複数使うことによって、1カラムの部分は100%になる様になりました!

    上記に追加の問題を記載したのですが、複数カラムの方の幅を取得して、1カラムの方に幅を代入して、全体の幅を揃えたいと思っています。

    そういう前提で初めから質問しておけばよかったと反省しております。。。

    こちら、またお力をお貸しいただけないでしょうか?

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

    キャンセル

  • 2016/09/08 21:28

    masonry 内の要素のmargin分、100%の要素にmarginを付けるだけでいいと思いますよ。

    jQueryを使わなくても、masonry 1,2両方を覆うdivでも作って必要な幅を指定し、masonry 1,2 に width:100% を設定すればいいと思います。

    ずれの状況がわからないので、もしこういうことでないのであれば、図示していただければと思います。

    キャンセル

  • 2016/09/08 22:22

    >kei344さま

    度々のご回答ありがとうございます!ご親切に感謝いたします。
    きちんと仕様を記載しきれておらず恐縮なのですが、レスポンシブで拡大した時に
    追加の画像の通りに複数カラムの方が幅が広くなってしまったりします。

    ここをどうにか解決できないかと思い、複数カラムの幅を取得したいと思った次第です。

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

    キャンセル

  • 2016/09/09 12:39

    >kei344さま

    度々のご回答ありがとうございます!

    isFitWidth: true,なのですが、●html●の部分にも書いていたのですが、
    実は、入れているのです。

    うまく説明できず申し訳ありません。

    複数カラムの部分の画像が固定幅になっているので、
    下記のサイトのように、ブラウザの幅によっては左右の余白を変えることで
    対応していると思います。

    jQuery Masonry公式に紹介されていたサイト
    http://www.kristianhammerstad.com/

    1カラムの部分は指定が幅100%なので、それを守ろうとして、複数カラムの部分を
    左右の余白が変わってきてしまうのです。

    1カラムは、幅100%、複数カラムの方は固定幅としているのですから、
    当然の動作なのですが、
    そこをなんとか複数カラムと1カラムの左右の余白を合わせられないかなあと
    思ったのですが、難しいかもしれませんね、、、

    キャンセル

  • 2016/09/09 14:50

    すいません、見落としていました。

    .w100 { width: calc(100% - ((100% / 330px) - 20px )); }

    でいけるかと思ったのですが、「/」の右辺がintのみなので、下記とかでどうでしょう。

    $(function(){
    var w=$( "#photos" ).width();
    $( ".w100" ).width( w - ( ( w / 330 ) - 20 ) ); // 330 = 1個の幅 + 間隔(20px)
    });

    キャンセル

  • 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日かかりましたが、何とか見られる形にはなりました。

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

    キャンセル

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

  • JavaScript

    20334questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    11446questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    8133questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS3

    2614questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

  • XHTML

    37questions

    XHTMLは、eXtensible HyperText Markup Languageの略であり、SGMLベースであるHTMLとは違って、有効なXMLドキュメントにもなるHTMLアプリケーションです。XMLベースのツールを用いて生成されるHTMLページのためによく使われるマークアップ言語です。