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

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

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

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

jQuery

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

HTML

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

CSS

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

Q&A

解決済

3回答

5372閲覧

フロートの高さ揃えについて

MrSung

総合スコア15

JavaScript

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

jQuery

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

HTML

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

CSS

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

0グッド

6クリップ

投稿2016/02/17 02:10

編集2016/02/17 02:13

Webデザインを主にやっていまして、JavaScriptに関してはまだまだ勉強不足な点が多く、進めていく中でわからない箇所が出てきましたので質問させてください。

現在、マルチカラムレイアウトを作っていまして、tableレイアウトやflexboxは使用できない制約下にあります。

使用するのはレガシーブラウザにも対応したfloatを使用したレイアウトになるのですが、ご存知の通り、floatでは中身の要素の高さがそのまま各boxの高さになってしまいますので、下図のようにレイアウトが崩れてしまいます。

高さが揃っていない状態

そこで、高さ揃えのプラグインなどを用いて調整するわけですが、こちらも制約があり、自作のスクリプトで高さ揃えをしないといけません。

HTMLの構成としては、fixedレイアウトでunorderd list直下にlistが並んでいる状態です。
nカラム構成なのかを取得して、各行ごとの高さを揃えるというスクリプトを、まず以下のように考えました。

JavaScript

1$(function(){ 2 3 "use strict"; 4 5 // Get total number of lists 6 var numberOfLists = $('li:last-of-type').index() + 1; 7 //console.log('numberOfLists:', numberOfLists); 8 9 // Get width of parent ul and li 10 var widthOfParent = $('li').parent().width(), 11 widthOfLi = $('li').outerWidth(); 12 //console.log('widthOfLi:', widthOfLi); 13 14 // Count how many lists are in one row 15 var listsInRow = Math.floor(widthOfParent/widthOfLi); 16 //console.log('listsInRow:', listsInRow); 17 18 // Count how many lists are in one column 19 var listsInColumn = Math.ceil(numberOfLists/listsInRow); 20 //console.log('listsInColumn:', listsInColumn); 21 22 23 var r = listsInRow, 24 c = listsInColumn; 25 26 // Add the same class to lists in one row 27 for (var i=1; i<=c; i++) { 28 $('li:nth-of-type('+'-n'+(i*r)+')').addClass('equal_height--'+i); 29 for (var j=1; j<=c; j++) { 30 for (var k=1; k<c; k++) { 31 $('.equal_height--'+j).removeClass('equal_height--'+(j+k)); 32 } 33 } 34 } 35 36 37 // Give each class the same height 38 var biggestHeight_1 = 0, 39 biggestHeight_2 = 0, 40 biggestHeight_3 = 0; 41 42 $('.equal_height--1').each(function(){ 43 if($(this).height() > biggestHeight_1){ 44 biggestHeight_1 = $(this).height(); 45 } 46 }); 47 $('.equal_height--1').height(biggestHeight_1); 48 49 $('.equal_height--2').each(function(){ 50 if($(this).height() > biggestHeight_2){ 51 biggestHeight_2 = $(this).height(); 52 } 53 }); 54 $('.equal_height--2').height(biggestHeight_2); 55 56 $('.equal_height--3').each(function(){ 57 if($(this).height() > biggestHeight_3){ 58 biggestHeight_3 = $(this).height(); 59 } 60 }); 61 $('.equal_height--3').height(biggestHeight_3); 62 63 64 // Failed pattern 3 65// var biggestHeights = [], 66// equal_heights = []; 67// for (var m=1; m<=c; m++) { 68// biggestHeights.push('biggestHeight_'+m); 69// equal_heights.push('.equal_height--'+m); 70// } 71// console.log(biggestHeights,equal_heights); 72 73// $.each($(equal_heights), function(){ 74// for (var n=1; n<=c; n++) { 75// if($(this).height() > biggestHeights[n]){ 76// biggestHeights[n] = $(this).height(); 77// } 78// $(equal_heights).height(biggestHeights[n]); 79// } 80// }); 81 82 83 // Failed pattern 2 84// var biggestHeight = 'biggestHeight_', 85// arr = [], 86// maxArr = []; 87// for (var m=0; m<c; m++) { 88// arr = biggestHeight + String(m); 89// //console.log(arr); 90// $('.equal_height--'+(m+1)).height(); 91// } 92 93 94 // Failed pattern 1 95// var biggestHeight = 0, 96// arr = [], 97// maxArr = []; 98// for (var m=1; m<=c; m++) { 99// for (var n=1; n<=r; n++) { 100// arr[m-1][m+n-2] = $('.equal_height--'+m+':nth-of-type('+n+')').height(); 101// //$('.wrap').append('<p>'+arr[m-1][m+n-2]+'</p>'); 102// } 103// } 104// $('.wrap').append('<p>'+arr[0]+'</p>'); 105// for (var p=0; p<c; p++) { 106// maxArr[p] = Math.max(arr[p]); 107// } 108 109// for (var q=1; q<=c; q++) { 110// $('.equal_height--'+q).height(maxArr[q]); 111// } 112 113 114});

各行ごとに同じクラス名を割り当てて、その中で比較をし、一番高い高さを、同じ行の中の要素全てに適用するという設計で、下図のように上手く揃ってくれたのですが、

高さが揃っている状態

最後の各クラスごとに高さ揃えをするというコード(// Give each class the same heightの下)を上手くまとめることができません。

全体的な設計やコードの書き方も含めて、ご教授いただけると幸いです。

ご参考までに、HTMLとCSSは下記のような感じです。

HTML

1<!DOCTYPE html> 2<html> 3<head> 4<script src="https://code.jquery.com/jquery-1.11.3.js"></script> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width"> 7 <title>JS Bin</title> 8</head> 9<body> 10 <div class="wrap"> 11 <ul> 12 <li>Lorem ipsum dolor sit amet, no vel aliquid singulis, vix ex paulo choro. Facilisis concludaturque per eu, ad eius dolorem deleniti sed, quas detraxit et vel. At novum platonem sit.</li> 13 <li>Lorem ipsum dolor sit amet, no vel aliquid singulis, vix ex paulo choro. Facilisis concludaturque per eu, ad eius dolorem deleniti sed, quas detraxit et vel. At novum platonem sit. Qui eros timeam percipit te, possit mnesarchum ne mel. Et est iisque legendos,</li> 14 <li>Doctus phaedrum id est, pro lorem intellegam ut. Dicat deleniti instructior mel ei. Debet oratio tacimates vim ea, te pri rebum choro, scaevola volutpat omittantur ne nec. Natum eirmod facilisis mel in, porro appetere disputationi eu pri.</li> 15 <li>Minim ridens duo in, ut his nibh albucius definitionem, id vis essent mollis interesset. Probo graece te cum.</li> 16 <li>No sit semper maiorum, nibh nominati ei vim. Pro unum liber conceptam ut. No invidunt perfecto indoctum pri, ex falli mundi duo, esse fugit ea est. Mel ei ipsum aeterno bonorum, solum illud honestatis te nam, viderer intellegat et mea.</li> 17 <li>Cu iuvaret volumus detracto eos, altera accusam eos ei, te falli suscipit comprehensam eam. Has ea graeci consequat, ex assum ponderum consetetur ius, electram iudicabit definitionem mea in.</li> 18 <li>Id quo porro alterum. Ne mea purto case. Quod nonumes corpora et sed, te quod fugit pri. Cu sea quis purto decore, ad iusto tation sed, iriure menandri honestatis te usu.</li> 19 <li>Vocent evertitur te has, exerci impetus ullamcorper ut sit. Has nulla mazim at, est harum molestie ei, vim et corpora deleniti consequuntur. Elit atqui nostrum ad nam, ad sententiae adipiscing eum. Electram petentium laboramus his ut, malis inani voluptaria id est. Cu iuvaret volumus detracto eos, altera accusam eos ei, te falli suscipit comprehensam eam. Has ea graeci consequat, ex assum ponderum consetetur ius, electram iudicabit definitionem mea in.</li> 20 <li>Doctus phaedrum id est, pro lorem intellegam ut. Dicat deleniti instructior mel ei. Debet oratio tacimates vim ea, te pri rebum choro, scaevola volutpat omittantur ne nec. Natum eirmod facilisis mel in, porro appetere disputationi eu pri.</li> 21 <li>Minim ridens duo in, ut his nibh albucius definitionem, id vis essent mollis interesset. Probo graece te cum.</li> 22 <li>No sit semper maiorum, nibh nominati ei vim. Pro unum liber conceptam ut. No invidunt perfecto indoctum pri, ex falli mundi duo, esse fugit ea est. Mel ei ipsum aeterno bonorum, solum illud honestatis te nam, viderer intellegat et mea. Id quo porro alterum. Ne mea purto case. Quod nonumes corpora et sed, te quod fugit pri. Cu sea quis purto decore, ad iusto tation sed, iriure menandri honestatis te usu.</li> 23 <li>Cu iuvaret volumus detracto eos, altera accusam eos ei, te falli suscipit comprehensam eam. Has ea graeci consequat, ex assum ponderum consetetur ius, electram iudicabit definitionem mea in.</li> 24 </ul> 25 26 27 </div> 28</body> 29</html>

SCSS

1@import url(https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css); 2 3$col-4: 960px; 4$col-3: 725px; 5$col-2: 530px; 6$padding-wrap: 20px; 7 8$width-li: 215px; 9$padding-li: 10px; 10 11html { 12 box-sizing: border-box; 13} 14*, *::before, *::after { 15 box-sizing: inherit; 16} 17 18body { 19 background-color: lightgray; 20} 21 22.wrap { 23 width: $col-4; 24 padding: $padding-wrap; 25 margin: 20px auto; 26 background-color: #fff; 27 box-shadow: 0 0 1px #ccc; 28} 29 30ul { 31 overflow: hidden; 32 list-style: none; 33 & li { 34 width: $width-li; 35 padding: $padding-li; 36 margin-bottom: 20px; 37 float: left; 38 color: #fff; 39 &:not(:nth-of-type(4n)) { 40 margin-right: 20px; 41 } // 3col: 3n, 2col: 2n 42 &:nth-of-type(8n+1) { 43 background-color: tomato; 44 } 45 &:nth-of-type(8n+2) { 46 background-color: orange; 47 } 48 &:nth-of-type(8n+3) { 49 background-color: desaturate(yellow, 30%); 50 } 51 &:nth-of-type(8n+4) { 52 background-color: lighten(green, 10%); 53 } 54 &:nth-of-type(8n+5) { 55 background-color: blue; 56 } 57 &:nth-of-type(8n+6) { 58 background-color: navy; 59 } 60 &:nth-of-type(8n+7) { 61 background-color: purple; 62 } 63 &:nth-of-type(8n) { 64 background-color: gray; 65 } 66 } 67}

どうぞよろしくお願いいたします。

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

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

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

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

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

guest

回答3

0

mapを利用して段階的にやってみました。
クラスを付ける部分もmapで書き直してみましたが、高さをそろえるための全体の手順としては不要でした。

javascript

1var setEqualHeight = function(){ 2 var $li = $('li'); 3 4 var numberOfLists = $li.length; 5 //console.log('numberOfLists:', numberOfLists); 6 7 // Get width of parent ul and li 8 var widthOfParent = $li.parent().width(), 9 widthOfLi = $li.outerWidth(); 10 //console.log('widthOfLi:', widthOfLi); 11 12 // Count how many lists are in one row 13 var listsInRow = Math.floor(widthOfParent/widthOfLi); 14 console.log('listsInRow:', listsInRow); 15 16 // Count how many lists are in one column 17 var listsInColumn = Math.ceil(numberOfLists/listsInRow); 18 console.log('listsInColumn:', listsInColumn); 19 20 // Add the same class to lists in one row 21 $.map($li, function(item, index){ 22 var $item = $(item), 23 num = Math.floor(index / listsInRow) + 1, 24 className = 'equal_height--' + num; 25 26 $item.addClass(className); 27 }); 28 29 // 各要素の高さを集めた配列を作成 30 var heightArray = []; 31 32 $.map($li, function(item, index){ 33 var $item = $(item), 34 height = $item.height(), 35 num = Math.floor(index / listsInRow); 36 37 heightArray[num] = heightArray[num] || []; 38 heightArray[num].push(height); 39 }); 40 41 console.log(heightArray); 42 // n行目の要素の高さが heightArray[n-1]に配列としてまとめられた二重配列ができる。 43 // [[128,192,192,80],[176,144,128,352],[192,80,304,144]] 44 45 // 上記二重配列を元にして、最大の高さだけを抽出した配列を作成 46 var maxHeightArray = $.map(heightArray, function(item, index){ 47 var maxHeight = Math.max.apply(null, item); // 配列の中から最大値を抽出 48 return maxHeight; 49 }); 50 51 console.log(maxHeightArray); // [192,352,304] 52 53 // 上記結果を各行に適用 54 $.map($li, function(item, index){ 55 var $item = $(item), 56 num = Math.floor(index / listsInRow), 57 maxHeight = maxHeightArray[num]; // 最大の高さを上記配列から取り出す 58 59 $item.height(maxHeight); 60 }); 61} 62 63setEqualHeight();

最後の適用をfor文でやるとこんな感じでした。

javascript

1 // 上記結果を各行に適用 2 var $content = $li; 3 4 for(var i = 0; i < listsInColumn ;i++){ 5 var $target = $content.slice(0, listsInRow), // 1行目から順に4つずつ抽出 6 maxHeight = maxHeightArray[i]; 7 8 $target.height(maxHeight); 9 $content = $content.slice(listsInRow); // 高さを適用した行を除外して、ループの最初に戻る 10 }

投稿2016/02/17 06:55

編集2016/02/18 01:20
yamato_hikawa

総合スコア2092

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

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

0

ベストアンサー

コメントがないと意味不明なソースになってしまいました。。。

Javascript

1var ulObj = $("div.wrap ul"); 2var liList = ulObj.children("li"); 3var liCount = liList.length; 4var liWidth = liList.outerWidth(); 5var colCount = Math.floor(ulObj.outerWidth() / liWidth); 6 7var counter = 0; 8var greatestHeight = 0; 9liList.each(function(index, value) { 10 counter++; 11 var height = $(value).outerHeight(); 12 greatestHeight = height > greatestHeight ? height : greatestHeight; 13 14 if (counter == colCount || index == liCount - 1) { 15 liList.slice(index - (counter - 1), index + 1).css("height", Math.round(greatestHeight)); 16 counter = 0; 17 greatestHeight = 0; 18 } 19}); 20

投稿2016/02/17 05:13

root_jp

総合スコア4666

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

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

MrSung

2016/02/17 05:50

おっしゃる通り、コメントがなくて意味不明ですが(笑)、 こちらのやり方で、あっさりと解決してしまいました。。 勉強になります。 ありがとうございました。
guest

0

for.each() で繰り返し処理を作るだけで解決しそうですが、

JavaScript

1for (var i = 1, l = 3, biggestHeight = 0, elements; i < l; ++i) { 2 elements = jQuery('.equal_height--' + i); 3 elements.each(function () { 4 var height = jQuery(this).height(); 5 6 if (height > biggestHeight) { 7 biggestHeight = height; 8 } 9 }); 10 elements.height(biggestHeight); 11}

後々の事を考慮して汎用関数を作っておくとすっきりと思われます。

JavaScript

1function setSameHeightByElements (elements1 /* [,elements2, ...] */) { 2 for (var i = 0, l = arguments.length, biggestHeight = 0, elements; i < l; ++i) { 3 elements = arguments[i]; 4 5 if (!(elements in jQuery)) { 6 throw new Error(elements + ' is not a jQuery object'); 7 } 8 9 for (var j = 0, m = elements.length; j < m; ++j) { 10 var height = jQuery(elements[j]).height(); 11 12 if (height > biggestHeight) { 13 biggestHeight = height; 14 } 15 } 16 17 elements.height(biggestHeight); 18 } 19} 20 21setSameHeightByElements(jQuery('.equal_height--1'), jQuery('.equal_height--2'), jQuery('.equal_height--3'));

Re: MrSung さん

投稿2016/02/17 03:46

編集2016/02/17 03:51
think49

総合スコア18156

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

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

MrSung

2016/02/17 05:48

ご丁寧なご回答ありがとうございます! 上段のJSで試してみたのですが、なぜか2段目以降が、全て同じ高さになってしまいました。。 書き方、ご参考にさせてください。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問