2

画面の解像度に基づいて 1 ～ 4 列でコンテンツを表示する必要があるセクションがあります。たとえば、解像度が幅 320 ピクセルの場合、1 つの ul のみを表示し、幅 1200 ピクセルの解像度では 4 つの列を表示する必要があります。

問題は、表示されている各列にコンテンツを均等に再配布する必要があるため、その中にあるコンテンツです。私が持っているHTMLは次のようになります。

<ul class="projectsList">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<ul class="projectsList">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<ul class="projectsList">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<ul class="projectsList">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

CSS は次のようになります。

.projectsList{
    float: left;
    margin: 0;
    padding: 0
}
.projectsList li{
    display: block;
    width: 100px;
    height: 100px;
    background: #CCC;
    margin: 0 10px 10px 0;
    list-style: none;
}
.mediaScreen{
    width: 1024px)

そして、これが私がこれまでに持っているコードです:

var mediaScreen = $('.mediaScreen').css('width');
var targetColumns;
var movingMosaics;
var wrapper = $(".projectsList");
var mosaic = $(".projectsList li");
var callback = false;

function adjustProjects(){
    if(mediaScreen == '1401px'){
        targetColumns = 4;
    }else if(mediaScreen == '1024px' || mediaScreen == '800px'){
        targetColumns = 3;
    }else if(mediaScreen == '600px'){
        targetColumns = 2;
    }else if(mediaScreen == '320px'){
        targetColumns = 1;
    }

    //When want columns to collapse
    if (wrapper.not('.empty').length > targetColumns){
        for (var i = $targetCols; i < $currentCols; i++){
            movingMosaics = wrapper.eq(i).find('li').addClass('moving');
            if(mosaicsToMove == wrapper.eq(i).find('.moving').length){
                callback = true;
                wrapper.eq(i).addClass('empty');
            }
        }

        if (callback == true){
           for(var j=0; j<movingMosaics.length; j++){
               for(var i=0; i<$targetCols; i++){
                   if(!wrapper.eq(i).hasClass("last")){
                       wrapper.eq(i).append(movingMosaics.eq(0))
                       movingMosaics.eq(j).removeClass('moving')
                       $(".last").removeClass("last");
                       wrapper.eq(1).addClass("last");
                       break;
                   };
               };
           };
        }

    //When want columns to expand
    }else if(wrapper.not('.empty').length < targetColumns){
        var totalIemsToMove = wrapper.find('li').length/targetColumns;
        var itemsPerCol = wrapper.find('li').length / wrapper.not('.empty').length;
        var itemsPerColToMove = itemsPerCol - totalIemsToMove;
        var indexItems = itemsPerCol - itemsPerColToMove;

        for(var i = 0; i< wrapper.not('.empty').length; i++){
            for (var j = indexItems; j <= itemsPerCol; j++){
                movingMosaics = wrapper.eq(i).find(' li').eq(j).addClass('reassign');
                if(totalIemsToMove == $('.reassign').length){
                    callback = true;
                }
            }
        }
        if (callback== true){
            for (var j = wrapper.not('.empty').length; j < targetColumns; j++){
                for (var i = 0; i < movingMosaics.length*2; i++){
                    wrapper.eq(j).append(movingMosaics.eq(i));
                        movingMosaics.eq(j).removeClass('reassign');
                    }
                    if($('.reassign').length == 0){
                           wrapper.eq(j).removeClass('empty');
                    }
                }
            }
            callback == false;
        }
    }

スクリプトにはいくつかの問題があります。それは部分的に機能します。したがって、基本的に 12 個の要素がある場合、それらを表示可能な「UL」の数に等しく移動する必要があります。4 つの表示列の場合は 3 つの要素が必要であり、3 つの表示列の場合は各列に 4 つの要素が必要であるというように... mediaScreen クラスは、メディア クエリの解像度に基づいて変化します。

私はスクリプトを非常に複雑にしていると思います。すべてを消去して、運が悪くても数回最初からやり直しました。この問題を解決する方法は何でしょうか?

4

1 に答える 1

0

画面サイズに基づいて列を非表示にする JavaScript コードは必要ありません。CSS を使用します。

HTML

<ul class="projectsList">
    <li>main1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<ul class="projectsList hide-phone">
    <li>phone1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<ul class="projectsList hide-tablet">
    <li>tablet1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<ul class="projectsList hide-desktop">
    <li>desktop1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

CSS

.projectsList {
    float: left;
    margin: 0;
    padding: 0;
}
.projectsList li {
    display: block;
    width: 100px;
    height: 100px;
    background: #CCC;
    margin: 0 10px 10px 0;
    list-style: none;
}
@media (max-width: 800px) {
    .hide-desktop {
        display: none;
    }
}
@media (max-width: 600px) {
    .hide-desktop {
        display: none;
    }
    .hide-tablet {
        display: none;
    }
}
@media (max-width: 320px) {
    .hide-desktop {
        display: none;
    }
    .hide-tablet {
        display: none;
    }
    .hide-phone {
        display: none;
    }
}

私の jsfiddle、http://jsfiddle.net/eLFKm/をチェックしてください。

于 2013-04-20T00:02:41.677 に答える