jquery – 如何垂直包装,然后水平

我需要在我的网站上水平显示搜索结果数据.我按照我的网站的地铁UI方式,所以我希望数据水平而不是垂直.

我需要的是在下面的图像中演示：

结果数据是动态的.我想先根据父div高度然后水平绘制divs.与WPF包装面板类似的东西,但是我还没有实现.

这是我试过的,水平绘制,然后垂直绘制：

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.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插件可用于此？

解决方法

添加清楚：留给.result类,使您的盒子垂直堆叠.

然后以3的方式包装结果并水平浮动这些块.您可以使用您可能使用的任何后端语言来输出结果标记或使用jQuery来执行该逻辑：

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

Fiddle

这是一个更灵敏的解决方案,重新计算窗口大小：Demo.

注意：它假定所有框具有相同的高度.如果不是这样,您可以在resultHeight变量中对最大高度进行硬编码.

$(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的cellByColumn / fitColumns布局.

最后,您的用例是使用Flexible Box Layout的主要示例.我还没有提到这一点,因为已经有其他答案显示了这个解决方案,也是因为现在很难使跨浏览器：

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

参考：http://caniuse.com/flexbox

虽然,一切都没有失去.如果您今天要使用FlexBox,那么Flexbox generator非常有用.

使用灵活框架的仅适用于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中正常工作.

注意：Firefox< = 27不支持具有多个行/列的FlexBox(它不支持flex-wrap：wrap).我已经在Firefox 29(夜间)测试了它,它的工作正常,所以我相信它应该稳定下来.

jquery – 如何垂直包装,然后水平

解决方法

猜你在找的jQuery相关文章