我有一个部分需要根据屏幕分辨率在 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 类根据媒体查询分辨率而变化。
我认为我正在使脚本变得非常复杂,并且我已经删除了所有内容并重新开始了几次,但没有任何运气。有什么方法可以解决这个问题?