Împachetarea listelor în coloane

I'm using ColdFusion to populate a template that includes HTML lists (

    's).

    Cele mai multe dintre acestea nu sunt atât de lungi, însă câteva au lungimi ridicole și pot fi într-adevăr în 2-3 coloane.

    Există un mod HTML , ColdFusion sau, probabil, JavaScript (am jQuery`) disponibil? Nu merită o soluție prea greu de greu pentru a salva unele defilare.

0
fr hi bn
Este acest plugin jQuery de orice folos pentru tine? givainc.com/labs/mcdropdown_jquery_plugin.htm
adăugat autor Quog, sursa
Consultați pluginul jQuery Columnizer .
adăugat autor phatmann, sursa

10 răspunsuri

There is no pure CSS/HTML way to achieve this, as far as I know. Your best bet would be to do it in pre-processing (if list length > 150, split into 3 columns, else if > 70, split into 2 columns, else 1).

Cealaltă opțiune, folosind JavaScript (nu sunt familiarizată cu biblioteca jQuery ) ar fi aceea de a itera prin liste, probabil bazându-se pe faptul că sunt o anumită clasă, numără numărul de copii și dacă este un număr suficient de mare, creați dinamic o listă nouă după prima, transferând un număr de elemente de listă în noua listă. În ceea ce privește implementarea coloanelor, probabil că le plutești la stânga, urmată de un element care avea stil clear: left sau clear: both .

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.column {
  float: left;
  width: 50%;
}
.clear {
  clear: both;
}
  • Item 1
  • Item 2
  • <!-- ... -->
  • Item 49
  • Item 50
  • Item 51
  • Item 52
  • <!-- ... -->
  • Item 99
  • Item 100
<div class="clear">
</div> </div>

0
adăugat

Așadar, am inventat acest articol din A List Apart. CSS Swag: Listă cu mai multe coloane . Am ajuns sa folosesc prima solutie, nu este cea mai buna, insa celelalte necesita fie folosirea unui HTML complex care nu poate fi generat in mod dinamic, fie creand o multime de clase personalizate, care ar putea fi facute dar ar necesita o multime de stil in-line si eventual o pagină imensă.

Alte soluții sunt totuși binevenite.

0
adăugat
Este trist că doi ani mai târziu nu există încă o cale curată pentru a face acest lucru. Mulțumesc IE.
adăugat autor Keyo, sursa
+1 găsesc metoda 6 cea mai curată abordare - poate fi ajustată să nu utilizeze nici un markup și foarte puțin CSS.
adăugat autor entonio, sursa
de mare ajutor. Mulțumiri
adăugat autor mr.soroush, sursa

Dacă suportul pentru Safari și Firefox este suficient de bun pentru dvs., există o soluție CSS:

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

Nu sunt sigur de Opera.

0
adăugat
Sunt de asemenea pe această soluție, dar pierd pierderile de pe listă ... chiar dacă le-am resetat sau încercând o imagine nu funcționează. Cineva?
adăugat autor Stefano, sursa
97,8% suport browser acum. Aflați mai multe despre opțiunea de coloane din CSS aici .
adăugat autor Nesha Zoric, sursa

Flexbox poate fi folosit pentru a înfășura obiectele atât în ​​direcțiile rândului cât și în coloană.

Ideea principală este să setați flex-direction pe container la row sau column .

NB: În zilele noastre suportul pentru browser este destul de bun.

FIDDLE

(Marcaj de eșantion luat de la acest articol vechi din lista separată )

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

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;
}

items in column direction

  1. Aloe
  2. Bergamot
  3. Calendula
  4. Damiana
  5. Elderflower
  6. Feverfew
  7. Ginger
  8. Hops
  9. Iris
  10. Juniper
  11. Kava kava
  12. Lavender
  13. Marjoram
  14. Nutmeg
  15. Oregano
  16. Pennyroyal

items in row direction

  1. Aloe
  2. Bergamot
  3. Calendula
  4. Damiana
  5. Elderflower
  6. Feverfew
  7. Ginger
  8. Hops
  9. Iris
  10. Juniper
  11. Kava kava
  12. Lavender
  13. Marjoram
  14. Nutmeg
  15. Oregano
  16. Pennyroyal
</div> </div>

0
adăugat

De când am avut aceeași problemă și nu am putut găsi nimic "curat", am crezut că mi-am postat soluția. În acest exemplu, folosesc o buclă inversată în timp ce pentru a putea folosi splice în loc de slice . Avantajul acum este splice() are nevoie doar de un index și de un interval în care slice() are nevoie de un index și totalul. Aceasta din urmă tinde să devină dificilă în timp ce se loopă.

Dezavantajul este că trebuie să inversez stiva în timp ce se anexează.

Exemplu:

cols = 4; liCount = 35

pentru bucla cu felie = [0, 9]; [9,18]; [18,27]; [27, 35]

inversat în timp cu splice = [27, 8]; [18, 9]; [9, 9]; [0, 9]

Cod:

// @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 = $("
    ").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(); }
0
adăugat

Pentru a scoate lista în mai multe etichete grupate, puteți face buclă în acest mod.






  
  • #listGetAt(list,i)#
0
adăugat

Puteți încerca acest lucru pentru a converti în cols.

CSS:

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

div.clr {
    clear:both;
}

Partea Html:

  • Number 1
  • Number 2
  • Number 19
  • Number 20
  • Number 21
  • Number 22
  • Number 39
  • Number 40

0
adăugat

Am făcut acest lucru cu jQuery - e cross-platform și un minim de cod.

Selectați UL, clonați-l și introduceți-l după ultima UL. Ceva asemănător cu:

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

Aceasta va introduce o copie a listei dvs. după cea precedentă. Dacă lista originală este creată cu un flotor: stânga, ar trebui să apară una lângă alta.

Apoi, puteți șterge articolele din lista din partea stângă și elementele ciudate din lista din partea dreaptă.

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

Acum aveți o listă de două stângi spre dreapta.

Pentru a face mai multe coloane, veți dori să utilizați .slice (început, sfârșit) și / sau selectorul : nth-child . de exemplu, pentru 21 de LI ai putea .slice (8,14) pentru a crea un nou UL introdus după UL original, apoi selectați UL original și ștergeți li cu ul: gt 8) .

Încercați cartea Bibeault / Katz pe jQuery este o resursă excelentă.

0
adăugat

Using a modulo operation, you can quickly split your list into multiple lists by inserting a

    during your loop.

    
    
    
    • #i#

    Utilizați ceiling() în loc de round() pentru a vă asigura că nu aveți valori suplimentare la sfârșitul listei și că ultima coloană este cea mai scurtă.

0
adăugat

Iată o altă soluție care permite listelor coloană în următorul stil:

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

(dar este doar javascript, și necesită jQuery, fără nici o rezervă)

Următoarea conține un cod care modifică prototipul Array pentru a da o nouă funcție numită "bucată" care rupe orice Array dat în bucăți de o anumită dimensiune. Următoarea este o funcție numită "buildColumns" care are un șir de selecție UL și un număr utilizat pentru a desemna câte rânduri pot conține coloanele dvs. ( Aici este un JSFiddle de lucru )

$(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);
});
0
adăugat
JavaScript, România - Moldova
JavaScript, România - Moldova
328 participanți

Comunitatea Română JavaScript: github.com/js-ro Pentru confort, opriți notificările. Parteneri: @node_ro, @php_ro, @python_ro, @seo_ro, @RomaniaGroup, @ai_ro, @Grupuri_IT Offtop: @holywars_ro Joburi: @js_jobs_ro Sponsored with ❤️ by ciupacabra.com