我正在开发一个响应式页面,其中 div 是从后端以以下方式生成的。我已经用 jquery 重新排列了这些 div,以适应不同的屏幕,如下所述。
<div class="tiles">
<div class="col first" style="width: 25%;">
<div class="tile" data-index="1"></div>
<div class="tile" data-index="5"></div>
<div class="tile" data-index="9"></div>
</div>
<div class="col" style="width: 25%;">
<div class="tile" data-index="2"></div>
<div class="tile" data-index="6"></div>
<div class="tile" data-index="10"></div>
</div>
<div class="col" style="width: 25%;">
<div class="tile" data-index="3"></div>
<div class="tile" data-index="7"></div>
<div class="tile" data-index="11"></div>
</div>
<div class="col last" style="width: 25%;">
<div class="tile" data-index="4"></div>
<div class="tile" data-index="8"></div>
<div class="tile" data-index="12"></div>
</div>
</div>
我必须读取 html 数据并在下面的场景中以响应方式动态地对其进行排序。 480:2, 1024:3, 1280:4, 1680:5
假设 480px 2 列,
<div class="tiles">
<div class="col first" style="width: 50%;">
<div class="tile" data-index="1"></div>
<div class="tile" data-index="3"></div>
<div class="tile" data-index="5"></div>
<div class="tile" data-index="7"></div>
<div class="tile" data-index="9"></div>
<div class="tile" data-index="11"></div>
</div>
<div class="col" style="width: 50%;">
<div class="tile" data-index="2"></div>
<div class="tile" data-index="4"></div>
<div class="tile" data-index="6"></div>
<div class="tile" data-index="8"></div>
<div class="tile" data-index="10"></div>
<div class="tile" data-index="12"></div>
</div>
</div>
假设 1024px,3 列......其他分辨率也类似
<div class="tiles">
<div class="col first" style="width: 33.333%;">
<div class="tile" data-index="1"></div>
<div class="tile" data-index="4"></div>
<div class="tile" data-index="7"></div>
<div class="tile" data-index="10"></div>
<div class="tile" data-index="13"></div>
<div class="tile" data-index="16"></div>
</div>
<div class="col" style="width: 33.333%;">
<div class="tile" data-index="2"></div>
<div class="tile" data-index="5"></div>
<div class="tile" data-index="8"></div>
<div class="tile" data-index="11"></div>
<div class="tile" data-index="14"></div>
<div class="tile" data-index="17"></div>
</div>
<div class="col last" style="width: 33.333%;">
<div class="tile" data-index="3"></div>
<div class="tile" data-index="6"></div>
<div class="tile" data-index="9"></div>
<div class="tile" data-index="12"></div>
<div class="tile" data-index="15"></div>
<div class="tile" data-index="18"></div>
</div>
</div>
最佳答案
试试这个
var contentslength=12;
function pageresponsive(parentclass,colcount){
$(parentclass).empty();
$(parentclass).append("<div class='tiles "+colcount+"-column'></div>");
var collength=colcount;
var colarray=[];
var a=1;
var c=1;
for(var i=1;i<=contentslength;i++){
if(a>collength){
a=1;
}
if(a<=collength){
if(colarray[a-1]!=undefined){
colarray[a-1]= colarray[a-1]+"<div class='tile' data-index='"+c+"'>ddd</div>";
}
else{
colarray[a-1]="<div class='tile' data-index='"+c+"'>ddd</div>";
}
}
a=a+1;
c=c+1;
}
var newdataarray=[];
for(var i=0;i<colarray.length;i++){
var thisclass=(i==0) ? "first" : ""
var allclasses="col col-"+(i+1)+" "+thisclass;
var thiswidth=(100/collength)+"%"
newdataarray.push("<div class='"+allclasses+"' style='width:"+thiswidth+"'>"+colarray[i]+"</div>")
}
$("."+collength+"-column").html(newdataarray.join(""));
}
function addcols(){
var windowwidth=$(window).width();
if(windowwidth<480){
pageresponsive(".row",2)
}
else if(windowwidth>=480 && windowwidth<1024){
pageresponsive(".row",3)
}
else if(windowwidth>=1024 && windowwidth<1280){
pageresponsive(".row",4)
}
else{
pageresponsive(".row",5)
}
}
addcols();
//for window resize
$(window).resize(function(){
addcols();
});
body,body *{
box-sizing:border-box;
}
.tiles{
width:100%;
float:left;
margin-bottom:10px;
padding:20px;
}
.col{
float:left;
padding:20px;
background:green;
}
.col-2{
background:pink;
}
.col-3{
background:red;
}
.col-4{
background:violet;
}
.col-5{
background:purple;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
</div>
JS Fiddle 演示:https://jsfiddle.net/geogeorge/6sg3jdok/4/show
在不同的屏幕宽度下查看此演示
关于Jquery通过读取html内容拆分列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34690817/