以行/列垂直堆叠项，而不是水平 [英] Stack items vertically in rows/columns instead of horizontally

问题描述

我正在创建一个html页面，并希望切换到页面的滚动和浮动。所以在身体或一个div中，我想要一个项目列表。每个项目都应该在之前的除非div的结束被触摸，那么它应该在更高的部分，以此类推。所以如果有很多显示它应该给一个水平的滚动条。基本上，如果你把屏幕90度，你得到我想要的。

示意图项目应该这样：

  1 4 7 10 
 2 5 8 11 
 3 6 9 12 
  

我真的没有线索，我应该从这个开始。我不知道如何调用这个搜索很难。

我想我需要分开我的问题2

  - 排序项目，所以他们在流程中像在计划。 
  - 水平滚动。 
  

在css中使用的一些方向将非常感激。

<

示例1：

/jsfiddle.net/SinisterSystems/LZqxm/4/rel =nofollow> http://jsfiddle.net/SinisterSystems/LZqxm/4/ （100件，小方块）

示例2： http://jsfiddle.net/SinisterSystems/LZqxm/5 / （1000项，大方框）

所有动态排列，所以任何宽度/高度 div 将工作。此外，只有数据的限制将是大约7840万项。

$ b pre> < div id =ourWrap>
< div id =expander>
< ul id =data>
< li> 1< / li>
< li> 2< / li>
...
< li> 14< / li>
< li> 15< / li>
< / ul>
< / div>
< / div>


CSS：

  #ourWrap {
 height：100px; 
 width：200px; 
 border：1px solid＃000; 
 overflow-x：scroll; 
 overflow-y：hidden; 
 position：absolute; 
} 
 ul {
 display：table-cell; 
} 
 li {
 list-style：none; 
} 
  

jQuery： b

  $（function（）{
 var dataRemap = []; 
 var $ cHeight = $（'＃data li：first- child'）。height（）; 
 var $ wHeight = $（'＃ourWrap'）。height（）; 
 var colHeight = $ wHeight / $ cHeight; 
 
 （li）.each（function（index）{
 dataRemap.push（$（this）.text（））; 
}）; 
 
 $（'数据'）。remove（）; 
 
 var ul; 
 $ .each（dataRemap，function（index，value）{
 if（index％colHeight === 0） {
 $（'＃expander'）。append（ul）; 
 ul = $（'< ul>'）; 
} 
 var li = ; li>'）。append（value）; 
 ul.append（li）; 
}）; 
 $（'＃expander'）append（ul）; 
 }）; 
  

示例1： http://jsfiddle.net/SinisterSystems/LZqxm/4/

示例2： http://jsfiddle.net/SinisterSystems/LZqxm/5/

---

那么，究竟是怎么回事？

取出单一的数据列表，

然后我清空了 ul 。

基于数组的索引值 ，并将 div 的高度与 li 的 height $ c> item，根据当前 height 找到适合 div 的总项。 p>



然后我们使用一个快速脚本为每个模数添加一个新的 ul / code>根据这个方程遇到。

我告诉你这不是很容易lol

I'm creating an html page and want to switch to scrolling and floating of the page. So within the body or a div I want a list of items. Every item should go under the previous unless the end of the div is touched, then it should go on the higher part and so on. So if there is to many to display it should give a horizontal sroll bar. Basically if you turn the screen 90 degrees you get what i want.

Schematically the items should go like this:

1  4  7  10
2  5  8  11
3  6  9  12

I've really no clue where I should start with this one. I don't know how to call this so searching for it is difficult.

I think I need to split up my problem in 2

- ordering the items so they go in the flow like in the scheme.
- scrolling horizontally.

Some direction in what css to use would be much appreciated.

解决方案

Must say, quite proud of this one

Example 1: http://jsfiddle.net/SinisterSystems/LZqxm/4/ (100 items, small box)

Example 2: http://jsfiddle.net/SinisterSystems/LZqxm/5/ (1000 items, large box)

All dynamically arranged, so any width/height div will work. Also, only limit on data would be around 78,400,000 items. (Which HTML would die from anyway).

HTML:

<div id="ourWrap">
<div id="expander">
<ul id="data">
    <li>1</li>
    <li>2</li>
       ...
    <li>14</li>
    <li>15</li>
</ul>    
</div>
</div>

CSS:

#ourWrap {
    height:100px;
    width:200px;
    border:1px solid #000;
    overflow-x:scroll;
    overflow-y:hidden;
    position:absolute;
}
ul {
    display:table-cell;  
}
li {
    list-style:none;
}

jQuery:

$(function() {
    var dataRemap = [];
    var $cHeight = $('#data li:first-child').height();
    var $wHeight = $('#ourWrap').height();
    var colHeight = $wHeight/$cHeight;

    $( "li" ).each(function( index ) {
        dataRemap.push($(this).text());
    });

    $('#data').remove();

    var ul;
    $.each(dataRemap, function (index, value) {
        if(index % colHeight === 0) {
            $('#expander').append(ul);
            ul = $('<ul>');
        }
        var li = $('<li>').append(value);
        ul.append(li);
    });
    $('#expander').append(ul);
});

Example 1: http://jsfiddle.net/SinisterSystems/LZqxm/4/

Example 2: http://jsfiddle.net/SinisterSystems/LZqxm/5/

---

So, what exactly is going on?

Took your single list of data, and backtracked into an array so JS can manipulate it easier.

Then I emptied the existing items in the ul.

Based on an index value of our array, and comparing the height of the div to the height of a li item, found out the total items that will fit into the div based on it's current height.

Then we used a quick script to append a new ul to the container for every modulus it encountered based on that equation.

I told you this is not typically easy lol

这篇关于以行/列垂直堆叠项，而不是水平的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！