ひさびさに、jQueryを使った。
〜個ごとに要素にクラスを追加したり、コンテンツの量に合わせて高さを変更したりするためのコードです。
だいぶ雑にアップします。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<div id="top_topics">
<div id="topicsMask">
<div id="topicsInner">
<ul id="topicsAll">
<li>20後ろで大きな爆発音がした。俺は驚いてお 料 ¥(^ ^)¥<li>
<li>7日間限定Premium SALE 6/7 18:00～6/13 23:59 2点以上のお買上で、全品20％OFF！送料無 料 ¥(^ ^)¥<li>
<li>20後ろで大きな爆発音がした。俺は驚いてお 料 ¥(^ ^)¥<li>
<li>120後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。 料 ¥(^ ^)¥<li><li>100れづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。（Wikipediaより）つ 料 ¥(^ ^)¥<li>
<li>50譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰 料 ¥(^ ^)¥<li><li>7日間限定Premium SALE 6/7 18:00～6/13 23:59 2点以上のお買上で、全品20％OFF！送料無 料 ¥(^ ^)¥<li>
<li>120後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。 料 ¥(^ ^)¥<li><li>50譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰 料 ¥(^ ^)¥<li>
<li>20後ろで大きな爆発音がした。俺は驚いてお 料 ¥(^ ^)¥<li><li>100れづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。（Wikipediaより）つ 料 ¥(^ ^)¥<li>
<li>120後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。 料 ¥(^ ^)¥<li><li>7日間限定Premium SALE 6/7 18:00～6/13 23:59 2点以上のお買上で、全品20％OFF！送料無 料 ¥(^ ^)¥<li>
<li>120後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。 料 ¥(^ ^)¥<li><li>7日間限定Premium SALE 6/7 18:00～6/13 23:59 2点以上のお買上で、全品20％OFF！送料無 料 ¥(^ ^)¥<li>
<li>50譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰 料 ¥(^ ^)¥<li><li>20後ろで大きな爆発音がした。俺は驚いてお 料 ¥(^ ^)¥<li>
<li>7日間限定Premium SALE 6/7 18:00～6/13 23:59 2点以上のお買上で、全品20％OFF！送料無 料 ¥(^ ^)¥<li><li>7日間限定Premium SALE 6/7 18:00～6/13 23:59 2点以上のお買上で、全品20％OFF！送料無 料 ¥(^ ^)¥<li>
<li>20後ろで大きな爆発音がした。俺は驚いてお 料 ¥(^ ^)¥<li><li>7日間限定Premium SALE 6/7 18:00～6/13 23:59 2点以上のお買上で、全品20％OFF！送料無 料 ¥(^ ^)¥<li>
<li>100れづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。（Wikipediaより）つ 料 ¥(^ ^)¥<li><li>120後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。 料 ¥(^ ^)¥<li>
<li>20後ろで大きな爆発音がした。俺は驚いてお 料 ¥(^ ^)¥<li><li>50譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰 料 ¥(^ ^)¥<li>
<li>20後ろで大きな爆発音がした。俺は驚いてお 料 ¥(^ ^)¥<li><li>120後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。 料 ¥(^ ^)¥<li>
<li>20後ろで大きな爆発音がした。俺は驚いてお 料 ¥(^ ^)¥<li><li>50譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰 料 ¥(^ ^)¥<li>
<li>20後ろで大きな爆発音がした。俺は驚いてお 料 ¥(^ ^)¥<li><li>100れづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。（Wikipediaより）つ 料 ¥(^ ^)¥<li>
<li>120後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。 料 ¥(^ ^)¥<li><li>50譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰 料 ¥(^ ^)¥<li>
<li>100れづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。（Wikipediaより）つ 料 ¥(^ ^)¥<li><li>100れづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。（Wikipediaより）つ 料 ¥(^ ^)¥<li>
<li>7日間限定Premium SALE 6/7 18:00～6/13 23:59 2点以上のお買上で、全品20％OFF！送料無 料 ¥(^ ^)¥<li>
</ul>
</div><!-- topicsInner END -->
<div id="arrowL" class="arrow">Prev</a></div>
<div id="arrowR" class="arrow">Next</a></div>
</div>
<!-- topicsMask END -->
<div class="topics-pager">
<span class="selected">●</span>
<span>●</span>
<span>●</span>
<span>●</span>
<span>●</span>
</div>
</div><!-- top_topics END --> |
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
// JavaScript Document
var maxlistHeightTop = 0;
var maxlistHeightBtm = 0;
var listHeight = 0;
var i = 1;
var totalHeight;
var arrowHeight;
$(document).ready(function(){
//共通トピックス一覧 -> 情報量大小によるレイアウト崩れ回避
$("#topicsAll li").each(function(i){
listHeight = $(this).height();
//4個ごとに要素にクラスを追加する。一番情報量が多いコンテンツの高さを調べる
if(Math.floor(i/4)%2==0){
$(this).addClass('upper');
if(listHeight > maxlistHeightTop){
maxlistHeightTop = listHeight;
} else {
maxlistHeightTop = maxlistHeightTop;
};
} else {
$(this).addClass('under');
if(listHeight > maxlistHeightBtm)
{
maxlistHeightBtm = listHeight;
} else {
maxlistHeightBtm = maxlistHeightBtm;
};
}
});
//<ul id="topicsAll"> を <div id="topicsAll">で置き換えて囲む
$('ul#topicsAll').replaceWith("<div id='topicsAll'>" + $('ul#topicsAll').html() + "</div>");
//合計40個の<li>要素を、8個ごとに<ul>で囲む
while($("#topicsAll").children("li").length){
$("#topicsAll").children("li:lt(8)").wrapAll('<ul id="page' + i + '" class="page"></ul>');
i = i + 1;
};
$('.page li.upper').css({"height":maxlistHeightTop}); // 一番長いコンテンツに合わせて上段の<li>の高さを指定
$('.page li.under').css({"height":maxlistHeightBtm}); // 下段の高さを指定
totalHeight = maxlistHeightTop+maxlistHeightBtm; //上段と下段のMAX高さを合計してコンテンツ全体の高さを指定
$('#topicsMask').css({"height": totalHeight});
arrowHeight = $('#topicsMask #arrowL').height();
arrowHeight = (totalHeight - arrowHeight)/2;
$('.arrow').css({'top':arrowHeight}); //コンテンツの高さに応じて左右矢印のY座標位置を指定
}); |
