Question

我有一个部分，我需要根据屏幕分辨率在1到4列中显示我的内容。例如，如果分辨率为320像素宽，则应仅显示一个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/。

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

1 个答案:

HTML

CSS