Переупорядочить блоки макета с помощью jQuery?

Question

Я начал отдельную тему here относительно другого подхода при построении полностью жидкой, отзывчивой компоновки с использованием поплавков, и я думаю, что совершенно другое решение может быть в порядке. I have started a new fiddle here, в котором я разделил блоки макета на два основных столбца, то есть .left-column и .right-column. Мне интересно, если через jQuery я могу по существу удалить эти контейнеры столбцов в определенной точке останова - скажем, @ 678px - заставить все divs линеаризовать ширину @ 100% и перестроить их так, чтобы в этом макете они были упорядоченно последовательно от 1 до 8.

Можно ли это сделать с помощью jQuery? Кроме того, я открыт для любых других (например, css-only) предложений по достижению этого желаемого эффекта. Я обнаружил, что плавание всех элементов, представленных в моей другой попытке, оказывается слишком проблематичным (по крайней мере, в моей текущей реализации.)

Большое спасибо за любую помощь здесь.

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){ 
 
    \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>