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

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

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

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

350閲覧

カードレイアウト(minigrid)が上に集まる。

officehojo

総合スコア11

jQuery

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2019/03/12 09:17

編集2019/03/12 11:27

前提・実現したいこと

現在、scriptでminigridを入れ、さらにcssのアニメーションで動きを出しているのですが、
最初にページを開いた時に、上に重なるようにして集まって(浮いて)きます。
リロードをかけるか、ウィンドウの幅を手作業で変えると下にずれ、
希望の表示に戻ってくれるのですが、
何が原因なのかわかりますでしょうか。

該当のソースコード

HTML

1<div class="card"> 2 <div class="work"> 3 <img src="images/portfolio/tsuzuku.jpg" alt="tsuzukuパッケージ"> 4 </div> 5 6 <article> 7 <p>2019<br> 8 TSUZUKU Package Deasign<br> 9 officehojo portfolio<br> 10 </p> 11 </article> 12</div>

SCRIPT

1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 2<script src="https://unpkg.com/minigrid@3.1.1/dist/minigrid.min.js"></script> 3 4 5<script> 6 7if (location.protocol === 'http:') { 8 location.href = 'https:' + window.location.href.substring(window.location.protocol.length); 9} 10 11(function(){ 12 var grid; 13 function init() { 14 grid = new Minigrid({ 15 container: '.cards', 16 item: '.card', 17 gutter: 12 18 }); 19 grid.mount(); 20 } 21 22 // mount 23 function update() { 24 grid.mount(); 25 } 26 27 document.addEventListener('DOMContentLoaded', init); 28 window.addEventListener('resize', update); 29})();

CSS

1.cards { 2 max-width: 80%; 3 height: auto; 4 text-align:center; 5 margin-left:20%; 6} 7 8.card { 9 width: 100%; 10 height:auto; 11} 12 13/*アニメーション*/ 14.card { 15 transition:.5s ease-in-out; 16} 17 18.work{ 19 width:90%; 20 height:auto; 21 padding:20px 10px; 22 /*border:1px solid #9fa0a0; 23 border-radius:20px;*/ 24 box-shadow:1px 2px 10px -3px #696969; 25 border-radius:4px; 26} 27 28.work img{ 29 width:100%; 30 height:auto; 31} 32 33article{ 34 padding:10px 8px; 35 font-size:9px; 36 text-align:left; 37 line-height:1.7em; 38 color:#7B7B7B; 39} 40

試したこと

もしや高さ指定がないから上にあつまるのでは?と思い、
.cards .cardそれぞれにheight:autoを追加しました。

補足情報(FW/ツールのバージョンなど)

こちらがminigridのGitHubです。

https://github.com/henriquea/minigrid

こちらが該当サイトのURLです。

https://officehojo.com

ここにより詳細な情報を記載してください。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2019/03/12 10:03

(質問文は編集できます)質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、プラグイン/ライブラリは公式配布サイトのURLを質問文に追記ください。(URLにはリンクを張ることができます)
Lhankor_Mhy

2019/03/13 01:23 編集

https://officehojo.com/ サイトを拝見しました。ハイパーリロードをかけると問題が再現し、当方の環境では通常リロードすると問題が再現したりしなかったりする感じでした。 また、ローカルにコピーして実行してみたところ、問題が再現しませんでした。 モジュールのコードを読んでみましたが、getBoundingClientRect().height で位置を取得して translate3D で配置しているようです。この取得で画像の高さの取得が遅れている場合があるのが原因なのでは、と推測しました。 また、CSSを拝見しましたが、 .card { transition:.5s ease-in-out; } という記述があるようでしたが、これも影響しているのかもしれません。
officehojo

2019/03/13 01:36

皆様、ありがとうございます。 こちらの環境はimac/iphone safariです。firefoxでも同様の現象が起きましたが、chromeは大丈夫なようです。 高さの取得が遅れている、、なるほど、納得です。transitionはちょっと気になってましたが、知識が足りず、どう改善すべきかのアイデアがありません。ひとまず最初にぐちゃっとなるのを改善したいのですが、いい方法がありましたら何かご教示いただけますでしょうか。色々と試してみたいと思います。
Lhankor_Mhy

2019/03/13 01:38

黒魔術的ですが、本当に画像の高さ取得が遅れているのであれば、setTimeoutなどで遅延させて mount() メソッドを実行すれば対処できるのではないでしょうか。
officehojo

2019/03/13 01:42

setTimeout、調べてみます。今の私にはなかなかのハードルです。(scriptが苦手)改善すればご報告します。ありがとうございます。
guest

回答2

0

類似事象に遭遇したので記載しておきます。
DOMContentLoaded完了後にinit()が呼ばれますが、この時点では画像取得が完了しておらず、height未取得の状態でカードの配置座標が算出された状態かと思います。
下記の追加で解決するのでは、と思います。

javascript

1document.addEventListener('load', update);

投稿2020/03/14 03:05

ninja250r

総合スコア152

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

x_x

2020/03/16 02:50

document ではなく window では?
guest

0

自己解決

scriptを下記に書き換え、最初の潰れは解決しました。

HTML

1var grid = new Minigrid({ container: '.cards', item: '.card', gutter: 6 }); grid.mount();

ですが、今回は可変で空間が詰まってくれない(高さがリロードするまで固定されている)ので、別の問題がでてしまいました。

投稿2019/03/13 05:58

officehojo

総合スコア11

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問