jQuery通过读取html内容拆分列

jquery split rows

114 观看

1回复

11 作者的声誉

我正在一个响应式页面上,其中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>
作者: user2586202 的来源 发布者: 2016 年 1 月 9 日

回应 1


1

299 作者的声誉

尝试这个

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小提琴演示:https : //jsfiddle.net/geogeorge/6sg3jdok/4/show

在不同的屏幕宽度上查看此演示

作者: Geo George 发布者: 2017 年 3 月 9 日
32x32