jsでグリッドデザインのサムネイルを制御する方法

締切済

質問者：casuwala
質問日時：2013/08/21 12:37
回答数：2件

図1のような、運用時にサムネイル画像の数が増えたり減る仕様でグリッドデザインをコーディングしているのですが、更新の度にhtmlソースを書き直すのは手間なので、どうにか簡単に更新できないか悩んでいます。

▼仕様
サムネイル画像は画像の番号順に増えたり減ったりする。

▼問題点
・サムネイル画像の縦の長さが一定ではない。かつ、並んだ時のマージンは一定。
↓
・上記の条件があるので、コーディング時には図2のように、縦にエリアを割って、area1、area2、area3、area4それぞれfloatをかけて並べる必要がある。

縦にエリアを割ってコーディングすると、htmlソース上では画像の順番がバラバラになるので、どうにかして、下記ようにリストのような状態で、図1のようなデザインを実現したいのですが、JavaScriptで出来るものでしょうか？
（※別にリストでなくてもいいのですが）

<ul>
<li>タイトル<img src="thum01.jpg"></li>
<li>タイトル<img src="thum02.jpg"></li>
<li>タイトル<img src="thum03.jpg"></li>
<li>タイトル<img src="thum04.jpg"></li>

～

</ul>

ご教授をお願いしたく、、、。
よろしくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.1

回答者： fujillin
回答日時：2013/08/26 13:41

回答がないみたいなので…

方法はいろいろあると思いますが、おおざっぱな雰囲気のみの一例です。
先に全体を走査して、position:absoluteで配置しているだけという方法です。

（全角空白は半角に）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
#target, #target li{ list-style-type:none; margin:0; padding:0; }
#target{ height:400px; overflow:auto; position:relative; }
#target li{ width:100px; margin:10px; /*position:absolute;*/ }

img{ width:100px; }
</style>
</head>

<body>
<ul id="target">
<li>タイトル1<img src="photo01.jpg"></li>
<li>タイトル2<img src="photo02.jpg"></li>
<li>タイトル3<img src="photo03.jpg"></li>
<li>タイトル4<img src="photo04.jpg"></li>
<li>タイトル5<img src="photo05.jpg"></li>
<li>タイトル6<img src="photo06.jpg"></li>
<li>タイトル7<img src="photo07.jpg"></li>
<li>タイトル8<img src="photo08.jpg"></li>
</ul>

<script type="text/javascript">
function layouter(id, width){
　var target = document.getElementById(id);
　var maxHeight = target.clientHeight;
　var lists = target.getElementsByTagName("LI");
　var i, e, position = [];
　var count, y, left = 0, top = 0;

　if(e = lists[0]) e.style.marginTop = "0px";
　for(i=0; e=lists[i]; i++){
　　y = e.offsetTop - top;
　　if(y + e.clientHeight > maxHeight){
　　　y = 0;
　　　top = e.offsetTop;
　　　left += width;
　　}
　　position[i] = [ left, y ];
　}

　for(i=0; e=lists[i]; i++){
　　var s = e.style, p = position[i];
　　s.position = "absolute";
　　s.left = p[0] + "px";
　　s.top = p[1] + "px";
　　if(p[1] === 0) s.marginTop = "0px";
　}
}

layouter("target", 110);

</script>
</body>
</html>

- 0
- 件

通報する

No.2

回答者： mpro-gram
回答日時：2013/08/27 17:16

Jqueryで作ってみました。

jquery-1.8.1.min.js で動作チェックしています。ブラウザはopera。
縦型の配置ブロック(div要素)に id を area0 から area3 まで振ります。css で必須なのは、 float : left;です。あとは、適宜修飾して下さい。
並べ替えたい要素を id="thum_list" の要素内に、順に記述しておきます(div要素としています)。見出し用のブロックも同じ扱いで先頭に。
縦型の配置ブロックよりさらに下方に表示したい要素が有るなら、css の clear:both; が必要です。
画像数が変わると、htmlの更新自体は必要だけど、とりあえず id="thum_list" の要素内に画像番号順に追加や削除で済むようにはなります。
<html lang="ja"><head>
<style type="text/css">
.tatewaku {
float : left;
width : 23%;/* 横に並べたい個数や、border,paddingサイズによって適宜変更, ブラウザによってpadding 内部サイズだったり、borderも含んでいたりするので注意 */
height: 80%;
overflow: auto;
padding: 1%;
border : 1px dotted green;
}
.clearbox{
clear:both;
}
</style>
<script type="text/javascript" src="jquery-1.8.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#thum_list div').each( function(key,val){
/* 第１引数keyに0開始の要素番号, 第２引数valはその番号の要素のDOMオブジェクト */
var area_id = '#area'+ (key % 4);/* 4 は配置枠個数 */
$(area_id).append( val );
} );/* each function end */
});/* ready function end */
</script>
</head>
<body><h1>配置　転換サンプル</h1>
<div>
<div id="area0" class="tatewaku"></div>
<div id="area1" class="tatewaku"></div>
<div id="area2" class="tatewaku"></div>
<div id="area3" class="tatewaku"></div>
</div>
<div id="thum_list">
<div><h2>大見出し用</h2>解説</div>
<div><h3>タイトルA</h3><img src="thum01.jpg"></div>
<div><h3>タイトルB</h3><img src=""></div>
<div><h3>タイトルC</h3><img src=""></div>
...
</div>
<div class="clearbox">clear しないと、float left しているブロックの右となりに表示される
</div>
</body></html>