jquery - 如何垂直包裹一个div，然后水平包裹

Question

我需要在我的站点中水平显示搜索结果数据。我的网站采用 Metro UI 方法，因此我希望数据水平流动而不是垂直流动。

我的要求如下图所示:

结果数据是动态的。我想先根据父 div 高度垂直绘制 div，然后再水平绘制。类似于 WPF 包装面板的东西，但我还没有能够实现它。

这是我尝试过的，水平绘制然后垂直绘制:

fiddle :http://jsfiddle.net/4wuJz/2/

HTML:

<div id="wrap">
   <div id="wrap1">
       <div class="result">
           <div class="title">1</div>
           <div class="postcontent">  
              <p>Test</p>
           </div>
       </div>

       <div class="result">
           <div class="title">2</div>
           <div class="postcontent">
              <p>Test</p>
           </div>
       </div>
   </div>
</div>

CSS

#wrap {
   width:100%;
   height: 500px;
   background-color: rgba(0,0,0,0.5);
   overflow:scroll;
   overflow-y:hidden;
}

#wrap1 {
   width:2500px;
   height:500px;
   text-align: center;
}


.result {
   width: 300px;
   vertical-align: middle;
   float:left;
   background: rgba(120,30,20,0.5);
   padding: 10px;
   margin: 30px 0px 30px 30px; 
}

如何更改我的代码以满足所需的输出？有任何可用的 jQuery 插件吗？

Answer 1

将 clear: left 添加到 .result 类，以便您的盒子垂直堆叠。

然后将结果包装成 3 个 block ，并水平 float 这些 block 。您可以使用您可能用于输出结果标记的任何后端语言或使用 jQuery 来执行该逻辑:

$('.result:nth-child(3n+1)').each(function() {
    $(this).add( $(this).next().next().addBack() ).wrapAll('<div style="float:left"></div>');
});

Fiddle

---

这是一个响应更快的解决方案，它会在窗口调整大小时重新计算:Demo .

注意:它假设所有的盒子都具有相同的高度。如果不是这种情况，您可以在 resultHeight 变量中硬编码一个 max-height。

$(window).resize(function() {
    var resultHeight = $('.result:first').outerHeight(true),
        nRows = Math.floor( $('#wrap1').height() / resultHeight );

    $('.results-column').contents().unwrap();
    $('.result:nth-child('+nRows+'n+1)').each(function() {
        $(this).nextAll().slice(0, nRows-1).add(this).wrapAll('<div class="results-column"></div>');
    });
}).resize();

添加的 CSS:

#wrap1 {
    white-space: nowrap;
}
.results-column {
    display: inline-block;
    vertical-align: top;
}

---

另请查看 Isotope及其 cellsByColumn/fitColumns 布局。

---

最后，您的用例是使用 Flexible Box Layout 的主要示例.我还没有提到这个，因为已经有其他答案显示了这个解决方案，也因为目前很难制作跨浏览器:

• Firefox <= 27，IE10 和 Safari <= 6 支持旧版本的规范
• 较新的 Chrome、Safari 和 IE11 支持新语法
• 不能忘记所有的浏览器前缀!

引用:http://caniuse.com/flexbox

虽然，一切还没有丢失。如果你今天想使用 Flexbox，有一个非常有用的 Flexbox generator .

使用 Flexbox 的纯 CSS 解决方案:Demo

#wrap1 {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-box-align: start;
    -moz-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}

我已经测试了这个解决方案，它在 IE10、IE11、Chrome 31、Opera 18 和 Firefox 29 Nightly 中正常工作。

注意 Firefox <= 27 不支持多行/多列的 Flexbox(不支持 flex-wrap: wrap)。我已经在 Firefox 29(每晚)上对此进行了测试并且它工作正常，所以我相信它应该很快就会稳定下来。