jquery - 使用 jQuery 添加/删除基于屏幕分辨率的无序列表

Question

我有一个部分需要根据屏幕分辨率在 1 到 4 列中显示我的内容。例如，如果分辨率为 320 像素宽，则应仅显示 1 个 ul，如果分辨率为 1200 像素宽，则应显示四列。

问题是我在其中的内容，因为我必须在每个可见列中平均重新分配内容。我的 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 个元素，我必须将它们平均移动到可见“uls”的数量。对于四个可见列，必须有三个元素，对于三个可见列，每列必须有四个元素，依此类推... mediaScreen 类根据媒体查询分辨率发生变化。

我认为我正在使脚本变得非常复杂，而且我已经删除了所有内容并重新开始了几次，但都没有任何运气。有什么方法可以解决这个问题？

Answer 1

您不需要任何 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/ .