Question

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

使用jQuery可以轻松实现吗？此外，就实现这种期望的效果而言，我对任何其他（例如仅限css）建议持开放态度。我发现浮动我在另一次尝试中呈现的所有元素证明太有问题了（至少在我当前的实现中。）

非常感谢你们的任何帮助。

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>

用jQuery重新排列布局块？

1 个答案: