こんにちは。javascriptでギミックを作っています。
下のコードを実行すると、divがサイズごとに並ぶのですが、一つ問題があります。
最初の段階で、parent(div)はoverflow: hidden;になっているのですが、
SEOの観点からすると、hiddenだとマイナス要因になるかもしれないと考えました。
jsでforループの最後にdisplay:noneをつけてみましたが、それをつけると
せっかく配置したdivまで消えてしまいました。
根本的な部分ですので直すのは難しいかと思いますが、どなたかいい知恵はありますか?
html
1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>無題ドキュメント</title> 6 <link rel="stylesheet" href="css/style.css"> 7</head> 8 9<body> 10 11 <div class="containers clearfix"> 12 <div id="content01"></div> 13 <div id="content02"></div> 14 <div id="content03"></div> 15 </div> 16 <div id="parent"> 17 <div class="list" name ="1">テキストテキストテキストテキストテキストテキストトテキストトテキストトテキストトテキスト</div> 18 <div class="list" name ="2">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div> 19 <div class="list" name ="3">テキストテキストテキストテキストテキストテキスト</div> 20 <div class="list" name ="4">テキストテキストテキストテキスト</div> 21 <div class="list" name ="5">テキストテキスト</div> 22 <div class="list" name ="6">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div> 23 <div class="list" name ="7">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div> 24 <div class="list" name ="8">テキストテキストテキストテキスト</div> 25 </div> 26 27 <script src="js/masonry.js"></script> 28</body> 29</html> 30
css
1@charset "utf-8"; 2/* CSS Document */ 3 4.containers{ 5 position: relative; 6} 7.containers div{ 8 margin-left: 20px; 9} 10#content01{ 11 position: absolute; 12 left: 0; 13} 14#content02{ 15 position: absolute; 16 left: 220px; 17} 18#content03{ 19 position: absolute; 20 left: 440px; 21} 22#parent{ 23 height: 0; 24 overflow: hidden; 25} 26ul{ 27 width: 660px; 28 position: relative; 29} 30.list{ 31 background-color: #ddd; 32 width: 200px; 33 margin-bottom: 20px; 34 list-style: none; 35 padding: 15px; 36 box-sizing: border-box; 37 margin-left: 20px; 38 margin-top: 20px; 39 /*display: none;*/ 40 /*position: absolute;*/ 41} 42.narabekae{ 43 display: block; 44 transition: 1.5s; 45} 46 47.clearfix::after{ 48 content: ""; 49 display: block; 50 clear: both; 51} 52 53.none{ 54 display: none; 55}
js
1// JavaScript Document 2 3(function(){ 4 var parent = document.getElementById("parent"); 5 var content01 = document.getElementById("content01"); 6 var content02 = document.getElementById("content02"); 7 var content03 = document.getElementById("content03"); 8 9 var p_chidren = parent.children; 10 var list = document.getElementsByClassName("list"); 11 var minimumHeight = 0; 12 var height01 =0; 13 var height02 =0; 14 var height03 =0; 15 16 //console.log(p_chidren) 17 for(var i = 0; i < list.length; i++ ){ 18 var thisList = list[i]; 19 20 if(i === 0){ 21 content01.style.heght = height01; 22 content01.insertAdjacentElement('afterbegin', thisList); 23 height01 += thisList.offsetHeight; 24 //console.log(height01); 25 }else if(i === 1){ 26 content02.insertAdjacentElement('afterbegin', thisList); 27 height02 += thisList.offsetHeight; 28 }else if(i === 2){ 29 content03.insertAdjacentElement('afterbegin', thisList); 30 height03 += thisList.offsetHeight; 31 }else{ 32 console.log(thisList) 33 if(height01 < height02 && height01 < height03){ 34 content01.insertAdjacentElement('beforeend', thisList); 35 height01 += thisList.offsetHeight; 36 }else if(height02 < height01 && height02 < height03){ 37 content02.insertAdjacentElement('beforeend', thisList); 38 height02 += thisList.offsetHeight; 39 }else if(height03 < height01 && height03 < height02){ 40 content03.insertAdjacentElement('beforeend', thisList); 41 height03 += thisList.offsetHeight; 42 }else if(height01 === height02 || height01 === height03){ 43 content01.insertAdjacentElement('beforeend', thisList); 44 height01 += thisList.offsetHeight; 45 }else if(height02 === height03){ 46 content02.insertAdjacentElement('beforeend', thisList); 47 height02 += thisList.offsetHeight; 48 } 49 50 } 51 52 53 54 //thisList.classList.add("none"); 55 56 57 } 58 59 60 61 62 //var offsetParent = document.getElementsByClassName("li")[0].offsetParent ; 63 64 65 66})();
タイトルと質問内容が合致していないように思います。
調整願います。
回答4件
あなたの回答
tips
プレビュー