Jquery通过读取html内容拆分列

Question

我正在开发一个响应式页面，其中 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>

假设为 1024 像素，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>

Answer 1

试试这个

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

在不同的屏幕宽度下查看这个演示