javascript - 响应式地包装和展开 div

Question

我有一组 6 个 DIV，我想根据浏览器的屏幕宽度每隔 X 个 div 包装在一个新的 div 中。

所以开始我有

<div class="blogItem"></div>
<div class="blogItem"></div>
<div class="blogItem"></div>
<div class="blogItem"></div>
<div class="blogItem"></div>
<div class="blogItem"></div>

所以在 980px 以上我想添加一个带有 style="display: table-row;"的新 DIV每 3 个 DIV - 从而使:

<div style="display:table-row;">
<div class="blogItem"></div>
<div class="blogItem"></div>
<div class="blogItem"></div>
</div>
<div style="display:table-row;">
<div class="blogItem"></div>
<div class="blogItem"></div>
<div class="blogItem"></div>
</div>

然后在 400px 和 979px 之间，我希望它包装每个 2nd div，这样它就变成了:

<div style="display:table-row;">
<div class="blogItem"></div>
<div class="blogItem"></div>
</div>
<div style="display:table-row;">
<div class="blogItem"></div>
<div class="blogItem"></div>
</div>
<div style="display:table-row;">
<div class="blogItem"></div>
<div class="blogItem"></div>
</div>

然后每 1 个 DIV 低于 399px，所以它变成:

<div style="display:table-row;">
<div class="blogItem"></div>
</div>
<div style="display:table-row;">
<div class="blogItem"></div>
</div>
<div style="display:table-row;">
<div class="blogItem"></div>
</div>
<div style="display:table-row;">
<div class="blogItem"></div>
</div>
<div style="display:table-row;">
<div class="blogItem"></div>
</div>
<div style="display:table-row;">
<div class="blogItem"></div>
</div>

我该怎么做？

我使用的解决方案在页面加载时运行良好，但在您更改浏览器大小时不会更新:

980px及以上

var divs = $(".blogItem");
for(var i = 0; i < divs.length; i+=3) {
  divs.slice(i, i+3).wrapAll("<div id='wrapper' style='display:table-row'></div>");
}

对于 400 - 979

var divs = $(".blogItem");
for(var i = 0; i < divs.length; i+=2) {
  divs.slice(i, i+2).wrapAll("<div id='wrapper' style='display:table-row'></div>");
}

399岁以下

var divs = $(".blogItem");
for(var i = 0; i < divs.length; i+=1) {
  divs.slice(i, i+1).wrapAll("<div id='wrapper' style='display:table-row'></div>");
}

它们统称为:

function blogPadders () {

// read window size
var windowSize = $(window).width();
// set div var for wrapping in rows
var divs = $(".blogItem");

if (windowSize >= 746) {
for(var i = 0; i < divs.length; i+=3) {
  divs.slice(i, i+3).wrapAll("<div id='wrapper' style='display:table-row'></div>");
}

}

else if (windowSize >= 371 && windowSize <= 745) {
for(var i = 0; i < divs.length; i+=2) {
  divs.slice(i, i+2).wrapAll("<div id='wrapper' style='display:table-row'></div>");
}

}

else if (windowSize <= 370) {
for(var i = 0; i < divs.length; i+=1) {
  divs.slice(i, i+1).wrapAll("<div id='wrapper' style='display:table-row'></div>");
}

}

}

blogPadders();

$(document).ready(blogPadders);
$(window).load(blogPadders);
$(window).resize(blogPadders);

Answer 1

你可以使用循环:

var $div= $('#your_id div'),
    length = $div.length;
for (var i = 0; i < length; i = i + 3) {
    $div.slice(i, i + 3).wrapAll('<div class="group" style="display:table-row" />')
}

像这样为不同的分辨率应用不同的脚本。

例子:

if($(window).width <= 768){
var $div= $('#your_id div'),
        length = $div.length;
    for (var i = 0; i < length; i = i + 2) {
        $div.slice(i, i + 2).wrapAll('<div class="group" style="display:table-row" />')
    }
}

但我建议您通过 Bootstrap 来构建响应式网站。 http://getbootstrap.com/

更新:调整大小时展开:

$(window).on('resize',function() {
  //to unwrap 
  $('.group').contents().unwrap();
  //now use other codes here to wrap
});