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

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

新規登録して質問してみよう
ただいま回答率
87.20%
JavaScript

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

jQuery

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

HTML

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

解決済

Muuri.jsでサイト読み込み時に要素のレイアウトが崩れてしまう

cocy_eng
cocy_eng

総合スコア1

JavaScript

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

jQuery

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

HTML

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

1回答

0評価

0クリップ

186閲覧

投稿2022/07/04 16:48

編集2022/07/05 22:01

Muuri.jsを使って画像ギャラリーを表示するサイトを制作しています。Webは少し経験がありますが非専門の者です。

画面を読み込んだ瞬間に画像レイアウトが崩れてしまい困っています(画像が上に寄って重なってしまっている状態)。
要素を全てhtml内にベタ打ちすればこのようにはならないのですが、後々のことを考え、jsonでリスト化した情報をjsでhtmlに書き込む方法を取っています。

イメージ説明
サイト読み込み後、ブラウザサイズを少しだけ変更すると、リキッドレイアウトの処理が走り、正しいレイアウトとなります。
イメージ説明
画面読み込み時に最初から正しい状態で表示するにはどうしたら良いか、アドバイスをいただけると幸いです。
初めての質問で説明が拙かったら申し訳ありません。

html

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>test</title> <meta name="description" content="test"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css"> <link rel="stylesheet" type="text/css" href="../css/compare.css"> </head> <body> <h1>TEST</h1> <section class="grid-wrapper"> <div class="filter-controls"> <div class="control">Select01 <select class="filter1-field form-control"> <option value="">All</option> <option value="h_w">01</option> <option value="h_c">02</option> </select> </div> <div class="control">Select02 <select class="filter2-field form-control"> <option value="">All</option> <option value="s_a">01</option> <option value="s_b">02</option> </select> </div> <div class="control">Select03 <select class="filter3-field form-control"> <option value="">All</option> <option value="v_2">01</option> <option value="v_3">02</option> </select> </div> </div><!-- filter-controls --> <div id="all_items" class="grid"> <!-- ここにscript_test.jsから画像要素を読み込む --> </div> </select> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.1/web-animations.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script> <script src="../js/muuri.js"></script> <script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script> <script src="../js/script_test.js"></script> </body> </html>

js

$(window).on('load',function(){ //すべての読み込みが終わった後に実行する var grid = null, wrapper = document.querySelector('.grid-wrapper'), filterField1 = wrapper.querySelector('.filter1-field'), filterField2 = wrapper.querySelector('.filter2-field'), filterField3 = wrapper.querySelector('.filter3-field'), //sortField = wrapper.querySelector('.sort-field'), gridElem = wrapper.querySelector('.grid'), filterAttr1 = 'data-hue', filterAttr2 = 'data-sat', filterAttr3 = 'data-val', //searchFieldValue, //filterFieldValue, filterFieldValue1, filterFieldValue2, filterFieldValue3, sortFieldValue, dragOrder = []; //Init the grid layout grid = new Muuri(gridElem, { // items: generateElements(), dragEnabled: true }); // jsonからリストを取得し、HTMLに要素を挿入する var ret = []; $.getJSON("../data/item_list.json" , function(item_list) { var len = item_list.length, tmp_str, appObj, conObj, _item; for(var i = 0; i < len; i++) { //var grid = new Muuri('.grid'); _item = document.createElement('div'); _item.innerHTML = '<div class="item" data-hue="h_'+item_list[i].hue+'" data-sat="s_'+item_list[i].sat+ '" data-val="v_'+item_list[i].val+'" data-title="'+item_list[i].id+'">'+ '<div class="item-content">'+ '<a href="../img/'+item_list[i].id+'_info.jpg" data-fancybox="group" data-caption="'+item_list[i].caption+'">'+ '<img src="../img/'+item_list[i].id+'.jpg" alt=""></a></div></div>'; ret.push(_item.firstChild); } grid.add(ret); }); //絞り込みフィルターを操作した時の挙動 filterFieldValue1 = filterField1.value; filterFieldValue2 = filterField2.value; filterFieldValue3 = filterField3.value; // Filter field event binding //filterField.addEventListener('change', filter); filterField1.addEventListener('change', filter); filterField2.addEventListener('change', filter); filterField3.addEventListener('change', filter); // Filtering function filter() { //filterFieldValue = filterField.value; filterFieldValue1 = filterField1.value; filterFieldValue2 = filterField2.value; filterFieldValue3 = filterField3.value; //alert(filterFieldValue1); grid.filter(function (item) { var element = item.getElement(), isFilterMatch1 = !filterFieldValue1 ? true : (element.getAttribute(filterAttr1) || '') === filterFieldValue1, isFilterMatch2 = !filterFieldValue2 ? true : (element.getAttribute(filterAttr2) || '') === filterFieldValue2, isFilterMatch3 = !filterFieldValue3 ? true : (element.getAttribute(filterAttr3) || '') === filterFieldValue3; return isFilterMatch1 && isFilterMatch2 && isFilterMatch3; }); } });

json

[ {"id":"001","hue":"w","sat":"a","val":"2","caption":"「TIXTOWER UENO」 撮影:iPhone7"}, {"id":"002","hue":"w","sat":"d","val":"3","caption":"「MIMARU東京 上野EAST」 撮影:iPhone7"}, {"id":"004","hue":"c","sat":"b","val":"8","caption":"茨城県北茨城市 撮影:iPhone7"}, {"id":"016","hue":"w","sat":"d","val":"5","caption":"東京都国分寺市 撮影:Canon EOS 6D Mark II"}, {"id":"005","hue":"n","sat":"b","val":"3","caption":"東京都台東区東下谷 撮影:iPhone7"}, {"id":"006","hue":"w","sat":"a","val":"3","caption":"「GRIDS HOTEL+HOSTEL TOKYOUENO」 撮影:iPhone7"}, {"id":"007","hue":"n","sat":"n","val":"4","caption":"東京都江東区 撮影:iPhone7"}, {"id":"008","hue":"w","sat":"b","val":"6","caption":"「GREEN SPRINGS / SORANO HOTEL」 撮影:iPad Pro(第2世代)</br>壁面がやや濃色となっている部分はリブパネル。"}, {"id":"009","hue":"w","sat":"a","val":"8","caption":"「SORANO HOTEL」 撮影:iPad Pro(第2世代)"}, {"id":"010","hue":"w","sat":"f","val":"5","caption":"「旧東京音楽学校奏楽堂」 撮影:iPhone7"}, {"id":"011","hue":"w","sat":"h","val":"4","caption":"「寛永寺清水観音堂」 撮影:iPhone7"}, {"id":"012","hue":"w","sat":"h","val":"4","caption":"「国立西洋博物館」 撮影:iPhone7</br>色むらのあるタイルだが、おおよその平均値を視感測色した。"}, {"id":"013","hue":"w","sat":"a","val":"8","caption":"東京都国分寺市 撮影:Canon EOS 6D Mark II"}, {"id":"014","hue":"w","sat":"b","val":"8","caption":"東京都国分寺市 撮影:Canon EOS 6D Mark II"}, {"id":"015","hue":"w","sat":"d","val":"7","caption":"東京都国分寺市 撮影:Canon EOS 6D Mark II"}, {"id":"018","hue":"w","sat":"a","val":"9","caption":"東京都国分寺市 撮影:Canon EOS 6D Mark II"}, {"id":"017","hue":"w","sat":"h","val":"5","caption":"東京都国分寺市 撮影:Canon EOS 6D Mark II"}, {"id":"003","hue":"n","sat":"h","val":"7","caption":"東京都台東区東上野 撮影:iPhone7"} ]

css

*:before, *:after { box-sizing: border-box; padding: 0; margin: 0; } body { background-color: #eee; color: #333; text-align: center; } body a, body a:visited { color: #999; text-decoration: none; } body a:hover { color: #777; } h1 { font-size: 36px; margin: 40px auto; } .filter-controls { text-align: center; margin-bottom: 30px; } .filter-controls .control { display: inline-block; width: 240px; margin: 0 10px; } .filter-controls .control * { box-sizing: border-box; } .filter-controls .control .form-control { width: 100%; height: 40px; padding: 0 20px; border: 2px solid #ccc; border-radius: 3px; background-color: #fff; color: #666; font-size: 16px; cursor: pointer; -webkit-appearance: none; appearance: none; } .filter-controls .control .form-control:focus { outline: 0; border-color: #0CAAF5; } .grid { position: relative; max-width: 90%; margin: 0 auto; } .item { display: block; position: absolute; /*width: 33%;/*横並びで3つ表示*/ width: 24.3%; padding:0 5px 10px 5px;/*画像に余白をつける*/ z-index: 1; } .item.blue .custom-content { border-color: #0CAAF5; color: #0CAAF5; } .item.red .custom-content { border-color: #F54487; color: #F54487; } .item.green .custom-content { border-color: #00DE73; color: #00DE73; } .item.w2 { width: 410px; } .item.h2 { height: 410px; } .item-content { position: relative; width: 100%; height: 100%; display: table; } /*画像の横幅を100%にしてレスポンシブ化*/ .grid img{ width:100%; height:auto; vertical-align: bottom;/*画像の下にできる余白を削除*/ } .custom-content { display: table-cell; vertical-align: middle; text-align: center; background: #fff; color: #666; border: 2px solid; border-radius: 3px; } .item.muuri-item-dragging { z-index: 3; transition: none; } .item.muuri-item-releasing { z-index: 2; } /*横幅が768px以下になった際の指定*/ @media only screen and (max-width: 1700px) { .item { width: 23%;/*横並びで4つ表示*/ padding: 0 5px 10px 5px; } } /*横幅が768px以下になった際の指定*/ @media only screen and (max-width: 768px) { .item { width: 48%;/*横並びで2つ表示*/ padding: 0 5px 10px 5px; } } /*===fancyboxサムネイル背景と画像選択時の枠線の指定*/ .fancybox-thumbs { background: transparent!important; } .fancybox-thumbs__list a:before { border: 6px solid #FA999B; }

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

Lhankor_Mhy

2022/07/05 01:10

CSSもご提示ください。
cocy_eng

2022/07/05 02:25

質問を見ていただきありがとうございます。 はい、Muuri.jsはそれのことです。CSSは本文中には文字数制限で入らなかったのですが、載せられるかどうか試してみます。
cocy_eng

2022/07/05 02:29

追記:不要なコメントアウト部分などを整理し、CSSも掲載しました。
Lhankor_Mhy

2022/07/05 03:19

問題を把握しました。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

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

JavaScript

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

jQuery

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

HTML

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