التفاف القوائم إلى الأعمدة

Question

أنا باستخدام ColdFusion لملء القالب الذي يشمل HTML قوائم (<ul>'s).

معظم هذه ليست طويلة ، ولكن عدد قليل طويلة يبعث على السخرية الأطوال و يمكن أن يقف حقا أن تكون في 2-3 الأعمدة.

هناك HTML, ColdFusion أو ربما JavaScript (لدي مسج` المتاحة) طريقة للقيام بذلك بسهولة ؟ لا يستحق الأمر بعض أكثر تعقيدا من الوزن الثقيل الحل لإنقاذ بعض التمرير.

Answer 1

حتى حفرت هذه المادة من قائمة بصرف النظر CSS غنيمة:بأعمدة قوائم.انتهى بي الأمر باستخدام الحل الأول, انها ليست أفضل ولكن البعض الآخر يتطلب إما باستخدام HTML معقد لا يمكن أن يكون ديناميكيا ، أو خلق الكثير من فئات مخصصة التي يمكن القيام به ولكن يتطلب الكثير من في خط التصميم وربما ضخمة الصفحة.

حلول أخرى لا تزال موضع ترحيب على الرغم من.

Answer 2

إذا سفاري و فايرفوكس دعم جيدة بما فيه الكفاية بالنسبة لك ، هناك CSS الحل:

ul {
  -webkit-column-count: 3;
     -moz-column-count: 3;
          column-count: 3;
  -webkit-column-gap: 2em;
     -moz-column-gap: 2em;
          column-gap: 2em;
}

أنا غير متأكد حول الأوبرا.

Answer 3

لا يوجد النقي CSS/HTML طريقة لتحقيق ذلك, بقدر ما أعرف.سيكون أفضل رهان أن تفعل ذلك في مرحلة ما قبل المعالجة (if list length > 150, split into 3 columns, else if > 70, split into 2 columns, else 1).

الخيار الآخر ، باستخدام جافا سكريبت (أنا لست على دراية مسج مكتبة على وجه التحديد) سيكون تكرار خلال القوائم على أساس كونهم فئة معينة عدد من الأطفال ، وإذا كان عدد مرتفع بما فيه الكفاية ، حيوي إنشاء قائمة جديدة بعد نقل عدد من عناصر القائمة إلى القائمة الجديدة.بقدر تنفيذ الأعمدة, وربما كنت يمكن أن تطفو لهم اليسار ، يليها عنصر كان اسلوب clear: left أو clear: both.

.column {
  float: left;
  width: 50%;
}
.clear {
  clear: both;
}

<ul class="column">
  <li>Item 1</li>
  <li>Item 2</li>
  <!-- ... -->
  <li>Item 49</li>
  <li>Item 50</li>
</ul>
<ul class="column">
  <li>Item 51</li>
  <li>Item 52</li>
  <!-- ... -->
  <li>Item 99</li>
  <li>Item 100</li>
</ul>
<div class="clear">

Answer 4

لقد فعلت هذا مع مسج - هو عبر منصة الحد الأدنى من التعليمات البرمجية.

حدد UL, استنساخ ذلك, وأدخله بعد السابق UL.شيء من هذا القبيل:

$("ul#listname").clone().attr("id","listname2").after()

هذا سيتم إدراج نسخة من القائمة الخاصة بك بعد سابقتها.إذا كان الأصل قائمة على غرار مع تعويم:غادر ، ينبغي أن تظهر جنبا إلى جنب.

ثم يمكنك حذف حتى العناصر من اليد اليسرى قائمة و الغريب العناصر من القائمة.

$("ul#listname li:even").remove();
$("ul#listname2 li:odd").remove();

الآن لديك اليسار إلى اليمين اثنين عمود القائمة.

أن تفعل أكثر من الأعمدة سوف تحتاج إلى استخدام .slice(begin,end) و/أو :nth-child محدد.أي لمدة 21 الدعاوى يمكن أن .slice(8,14) إنشاء جديد UL المدرجة بعد الأصلية UL ، ثم حدد الأصلي UL وحذف لي اختيار ul :gt(8).

حاول Bibeault/كاتز الكتاب على مسج هو كبير من الموارد.

Answer 5

هنا هو الاختلاف على Thumbkin هو مثال (باستخدام مسج):

var $cat_list = $('ul#catList'); // UL with all list items.
var $cat_flow = $('div#catFlow'); // Target div.
var $cat_list_clone = $cat_list.clone(); // Clone the list.
$('li:odd', $cat_list).remove(); // Remove odd list items.
$('li:even', $cat_list_clone).remove(); // Remove even list items.
$cat_flow.append($cat_list_clone); // Append the duplicate to the target div.

شكرا Thumbkin!

Answer 6

التالية شفرة جافا سكريبت يعمل فقط في وspidermonkey وحيد القرن, وتعمل على E4X العقد-أي هذا هو مفيدة فقط من جانب الخادم جافا سكريبت, ولكن قد تعطي شخص نقطة انطلاق لعمل نسخة مسج.(انها كانت مفيدة جدا بالنسبة لي على جانب الملقم ولكن لم يلزم على العميل سيئة بما فيه الكفاية أن نبني عليه في الواقع.)

function columns(x,num) {
    num || (num = 2);
    x.normalize();

    var cols, i, j, col, used, left, len, islist;
    used = left = 0;
    cols = <div class={'columns cols'+num}></div>;

    if((left = x.length())==1)
        left = x.children().length();
    else
        islist = true;

    for(i=0; i<num; i++) {
        len = Math.ceil(left/(num-i));
        col = islist ? new XMLList
                     : <{x.name()}></{x.name()}>;

        if(!islist && x['@class'].toString())
            col['@class'] = x['@class'];

        for(j=used; j<len+used; j++)
            islist ? (col += x[j].copy()) 
                   : (col.appendChild(x.child(j).copy()));

        used += len;
        left -= len;
        cols.appendChild(<div class={'column'+(i==(num-1) ? 'collast' : '')}>{col}</div>);
    }
    return cols;
}

كنت اسميها مثل columns(listNode,2) على عمودين ، ويتحول:

<ul class="foo">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

إلى:

<div class="columns cols2">
  <div class="column">
    <ul class="foo">
      <li>a</li>
      <li>b</li>
    </ul>
  </div>
  <div class="column collast">
    <ul class="foo">
      <li>c</li>
    </ul>
  </div>
</div>

إنه من المفترض أن يتم استخدامها مع CSS مثل هذا:

div.columns {
    overflow: hidden;
    _zoom: 1;
}

div.columns div.column {
    float: left;
}

div.cols2 div.column {
    width: 47.2%;
    padding: 0 5% 0 0;
}

div.cols3 div.column {
    width: 29.8%;
    padding: 0 5% 0 0;
}

div.cols4 div.column {
    width: 21.1%;
    padding: 0 5% 0 0;
}

div.cols5 div.column {
    width: 15.9%;
    padding: 0 5% 0 0;
}

div.columns div.collast {
    padding: 0;
}

Answer 7

الشيء الذي معظم الناس وينسى أنه عندما العائمة <li/> البنود, جميع البنود يجب أن تكون على نفس الارتفاع ، أو الأعمدة تبدأ الخروج من أجتز.

منذ كنت تستخدم ملقم جانب اللغة ، توصيتي سيكون لاستخدام راجع إلى تقسيم القائمة إلى 3 المصفوفات.ثم يمكنك استخدام خارجي ul التفاف 3 الداخلية ul مثل ذلك:

<cfset thelist = "1,2,3,4,5,6,7,8,9,10,11,12,13">  
<cfset container = []>  
<cfset container[1] = []>  
<cfset container[2] = []>  
<cfset container[3] = []>  

<cfloop list="#thelist#" index="i">  
    <cfif i mod 3 eq 0>  
        <cfset arrayappend(container[3], i)>  
    <cfelseif i mod 2 eq 0>  
        <cfset arrayappend(container[2], i)>  
    <cfelse>  
        <cfset arrayappend(container[1], i)>  
    </cfif>  
</cfloop>  

<style type="text/css"> 
    ul li { float: left; }  
    ul li ul li { clear: left; }  
</style>  

<cfoutput>  
<ul>  
    <cfloop from="1" to="3" index="a">  
    <li>  
        <ul>  
            <cfloop array="#container[a]#" index="i">  
            <li>#i#</li>  
            </cfloop>  
        </ul>  
    </li>  
    </cfloop>  
</ul>  
</cfoutput>

Answer 8

باستخدام مودولو ، يمكنك بسرعة الانقسام القائمة الخاصة بك في قوائم متعددة عن طريق إدخال </ul><ul> خلال حلقة الخاص بك.

<cfset numberOfColumns = 3 />
<cfset numberOfEntries = 34 />
<ul style="float:left;">
    <cfloop from="1" to="#numberOfEntries#" index="i">
        <li>#i#</li>
            <cfif NOT i MOD ceiling(numberOfEntries / numberOfColumns)>
                </ul>
                <ul style="float:left;">
            </cfif>
    </cfloop>
</ul>

استخدام ceiling() بدلا من round() للتأكد من أن لم يكن لديك إضافية القيم في نهاية القائمة و العمود الأخير هو أقصر.

Answer 9

لإخراج قائمة إلى عدة مجمعة الوسم يمكنك حلقة في هذه الموضة.

<cfset list="1,2,3,4,5,6,7,8,9,10,11,12,13,14">
<cfset numberOfColumns = "3">

<cfoutput>
<cfloop from="1" to="#numberOfColumns#" index="col">
  <ul>
  <cfloop from="#col#" to="#listLen(list)#" index="i" step="#numberOfColumns#">
    <li>#listGetAt(list,i)#</li>
  </cfloop>
  </ul>
</cfloop>
</cfoutput>

Answer 10

هنا هو آخر الحلول التي تسمح أعمدة القوائم في النمط التالي:

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

(لكنه نقية جافا سكريبت ، يتطلب مسج, لا تراجع)

وفيما يلي بعض التعليمات البرمجية التي يعدل مجموعة النموذج لإعطاء وظيفة جديدة تسمى 'القطعة' أن يكسر أي مجموعة إلى قطع من حجم معين.التالي هو وظيفة تسمى 'buildColumns' أن يأخذ UL محدد سلسلة وعدد تستخدم للدلالة كم من صفوف الأعمدة الخاصة بك قد تحتوي على.(هنا هو العامل JSFiddle)

$(document).ready(function(){
    Array.prototype.chunk = function(chunk_size){
        var array = this,
            new_array = [],
            chunk_size = chunk_size,
            i,
            length;

        for(i = 0, length = array.length; i < length; i += chunk_size){
            new_array.push(array.slice(i, i + chunk_size));
        }
        return new_array;
    }

    function buildColumns(list, row_limit) {
        var list_items = $(list).find('li').map(function(){return this;}).get(),
        row_limit = row_limit,
        columnized_list_items = list_items.chunk(row_limit);

        $(columnized_list_items).each(function(i){
            if (i != 0){
                var item_width = $(this).outerWidth(),
                    item_height = $(this).outerHeight(),
                    top_margin = -((item_height * row_limit) + (parseInt($(this).css('margin-top')) * row_limit)),
                    left_margin = (item_width * i) + (parseInt($(this).css('margin-left')) * (i + 1));

                $(this[0]).css('margin-top', top_margin);
                $(this).css('margin-left', left_margin);
            }
        });
    }

    buildColumns('ul#some_list', 5);
});

Answer 11

Flexbox يمكن استخدام التفاف العناصر في كل صف و عمود الاتجاهات.

الفكرة الرئيسية هي أن تعيين flex-direction على الحاوية إما row أو column.

ملحوظة::في الوقت الحاضر دعم المتصفح هو جيد جدا.

كمان

(توصيف عينة مأخوذة من هذا القديم 'قائمة بصرف النظر عن المادة)

ol {
  display: flex;
  flex-flow: column wrap; /* flex-direction: column */
  height: 100px; /* need to specify height :-( */
}
ol ~ ol {
  flex-flow: row wrap; /* flex-direction: row */
  max-height: auto; /* override max-height of the column direction */
}
li {
  width: 150px;
}
a {
  display: inline-block;
  padding-right: 35px;
}

<p>items in column direction</p>
<ol>
  <li><a href="#">Aloe</a>
  </li>
  <li><a href="#">Bergamot</a>
  </li>
  <li><a href="#">Calendula</a>
  </li>
  <li><a href="#">Damiana</a>
  </li>
  <li><a href="#">Elderflower</a>
  </li>
  <li><a href="#">Feverfew</a>
  </li>
  <li><a href="#">Ginger</a>
  </li>
  <li><a href="#">Hops</a>
  </li>
  <li><a href="#">Iris</a>
  </li>
  <li><a href="#">Juniper</a>
  </li>
  <li><a href="#">Kava kava</a>
  </li>
  <li><a href="#">Lavender</a>
  </li>
  <li><a href="#">Marjoram</a>
  </li>
  <li><a href="#">Nutmeg</a>
  </li>
  <li><a href="#">Oregano</a>
  </li>
  <li><a href="#">Pennyroyal</a>
  </li>
</ol>
<hr/>
<p>items in row direction</p>
<ol>
  <li><a href="#">Aloe</a>
  </li>
  <li><a href="#">Bergamot</a>
  </li>
  <li><a href="#">Calendula</a>
  </li>
  <li><a href="#">Damiana</a>
  </li>
  <li><a href="#">Elderflower</a>
  </li>
  <li><a href="#">Feverfew</a>
  </li>
  <li><a href="#">Ginger</a>
  </li>
  <li><a href="#">Hops</a>
  </li>
  <li><a href="#">Iris</a>
  </li>
  <li><a href="#">Juniper</a>
  </li>
  <li><a href="#">Kava kava</a>
  </li>
  <li><a href="#">Lavender</a>
  </li>
  <li><a href="#">Marjoram</a>
  </li>
  <li><a href="#">Nutmeg</a>
  </li>
  <li><a href="#">Oregano</a>
  </li>
  <li><a href="#">Pennyroyal</a>
  </li>
</ol>

Answer 12

منذ كان عندي نفس المشكلة و لم أجد أي شيء "نظيفة" فكرت في نشر الحل.في هذا المثال انا استخدم عكس while حلقة حتى أتمكن من استخدام splice بدلا من slice.ميزة الآن هو لصق() لا يحتاج إلا مؤشر ومجموعة حيث شريحة() يحتاج إلى دليل إجمالي.هذا الأخير يميل إلى أن يصبح من الصعب حين حلقات.

العيب هو أنا بحاجة إلى عكس المكدس في حين إلحاق.

على سبيل المثال:

cols = 4;liCount = 35

حلقة مع شريحة = [0, 9];[9, 18];[18, 27];[27, 35]

عكس بينما مع لصق = [27, 8];[18, 9];[9, 9];[0, 9]

كود:

// @param (list): a jquery ul object
// @param (cols): amount of requested columns
function multiColumn (list, cols) {
    var children = list.children(),
        target = list.parent(),
        liCount = children.length,
        newUl = $("<ul />").addClass(list.prop("class")),
        newItems,
        avg = Math.floor(liCount / cols),
        rest = liCount % cols,
        take,
        stack = [];

    while (cols--) {
        take = rest > cols ? (avg + 1) : avg;
        liCount -= take;

        newItems = children.splice(liCount, take);
        stack.push(newUl.clone().append(newItems));
    }

    target.append(stack.reverse());
    list.remove();
}

Answer 13

يمكنك أن تجرب هذا التحويل في cols.

CSS:

ul.col {
    width:50%;
    float:left;
}

div.clr {
    clear:both;
}

Html الجزء :

<ul class="col">
    <li>Number 1</li>
    <li>Number 2</li>

    <li>Number 19</li>
    <li>Number 20</li>
</ul>
<ul class="col">
    <li>Number 21</li>
    <li>Number 22</li>

    <li>Number 39</li>
    <li>Number 40</li>
</ul>