jquery - 使用 jQuery 重新排列布局 block ？

Question

我开始了一个单独的线程here关于使用 float 构建完全流畅的响应式布局的不同方法，我认为可能需要一个完全不同的解决方案。 I have started a new fiddle here ，其中我将布局 block 分成两个主要列，即 .left-column 和 .right-column。我想知道，通过 jQuery，我是否可以在某个断点处基本上删除这些列容器——比如@ 678px——强制所有 div 线性化 @ 100% 宽度，并重新排列它们，这样，在这个模型中，它们是从 1 到 8 按顺序排列。

这可以用 jQuery 轻松实现吗？此外，就实现此预期效果而言，我愿意接受任何其他(例如仅 css)建议。我发现在我的其他尝试中 float 所有元素被证明是有问题的(至少在我当前的实现中。)

非常感谢您提供的任何帮助。

Answer 1

在bootstrap 的帮助下，又一个基于列的网格解决方案| . 您可以在此处使用 Grid system 调整列宽

Fiddle is here如果你想玩。

$(function(){

$.fn.itemify = function(update){

var $t = $(this);

if ($t.data('itemify') && update!==true) return this;

var options = { col:'.col', item:'.item' },

items = $t.find(options.item),
col_count = 0,

fn = function(){
  var cols = $t.find(options.col+':visible');
  if( cols.length == col_count ) return;
  
  console.log(cols.length, col_count);
  col_count = cols.length;
  
  $t.find(options.col).empty();
  
  items.each(function(i, t){
  	shortest(cols).append(t);
  });
},

shortest = function(cols){
var a = 0, h = -1;
cols.each(function(i,t){
   if( $(t).height() < h || h==-1 ) {
      h = $(t).height();
      a = i;
   }
   //console.log( a, b, h, $(this).height() );
});
return cols.eq(a);
};

$(window).unbind('resize', fn).bind('resize', fn);
fn();

return this.data('itemify', 1);
};


/* ----- testing - START item + window resizing --*/
var test_items = $('#itemify .item');
$('.test').removeClass('hide').find('button').click(function(){
  var col = $('#itemify .col').eq(0).append(test_items), len = $('#itemify .item').length;
  
  for( i=0; i<10; i++)
    col.append( $('<div class="item">'+ ++len +'</div>').height( Math.random()*300+20 ) );
  
  test_items = $('#itemify .item');
  test();
  $('#itemify').itemify(true);
  $('html, body').animate({ scrollTop: $(document).height() }, 100);
});
function test(){
 $('.test .txt').text($('#itemify .item').length + ' items');
 
 $('#itemify .item').each(function(){
  var $t = $(this);
  
  if( $t.find('textarea').length==0 ) {
    $t.html( $('<textarea>'+ $t.text() +'</textarea>').height( $t.height()-5 ) );
    $t.removeAttr('style').removeClass().addClass('item');
  }
 });
}
test();
/* ----- testing - END -- */


/// start itemify
$('#itemify').itemify();

});

body {
  font-family: sans-serif;
  font-weight: bold;
  text-align: center;
}
.container-fluid {
  padding: 0 !important;
}
.row#itemify {
  margin: 0 0 0 15px;
}
.row .col {
  padding: 15px 15px 0 0;
}
.item {
  margin-bottom: 15px;
  background-color: #AAA;
}
.one {
  height: 170px;
}
.two {
  height: 250px;
}
.three {
  height: 150px;
}
.four {
  height: 250px;
}
.five {
  height: 450px;
}
.six {
  height: 350px;
}
.seven {
  height: 250px;
}
.eight {
  height: 200px;
}
.nine {
  height: 500px;
}

/* testing */
.test {
  position: fixed;
  bottom: 8px;
  right: 10px;
  text-align: right;
  font-size: 80%;
}
.item textarea {
  border: medium none;
  resize: vertical;
  min-width: 100%;
  max-width: 100%;
  text-align: center;
  background-color: transparent;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <div id="itemify" class="row">
    <div class="col col-xs-12 col-sm-4 col-md-3 col-lg-2">
      <div class="item one">1</div>
      <div class="item two">2</div>
      <div class="item three">3</div>
      <div class="item four">4</div>
      <div class="item five">5</div>
      <div class="item six">6</div>
      <div class="item seven">7</div>
      <div class="item eight">8</div>
      <div class="item nine">9</div>
      <div class="item five">10</div>
      
      <!-- more items -->
      <div class="item six">11</div>
      <div class="item two">12</div>
      <div class="item four">13</div>
      <div class="item eight">14</div>
      <div class="item three">15</div>
      <div class="item one">16</div>
      <div class="item nine">17</div>
      <div class="item seven">18</div>
      <div class="item two">19</div>
      <div class="item eight">20</div>
    </div>
    <div class="col col-sm-8 col-md-4 col-lg-2 visible-sm visible-md visible-lg"></div>
    <div class="col col-md-5 col-lg-3 visible-md visible-lg"></div>
    <div class="col col-lg-5 visible-lg"></div>
  </div>
</div>

<!-- testing -->
<div class="test hide">
  <div class="txt">txt</div>
  <button>add 10 items</button>
</div>