Wrapping content from different collection lists

Hello!

So I’m working on a library where I have the content separated alphabetically using the corresponding letter between each collection list.

I am wondering if it is possible to have all the content float/wrap around each other. (see image)

I would like for the beginning of the following collection list to float right of the previous row.

(I don’t have the vocab to better explain what I trying to achieve. Please bear with me :sweat_smile:)

PREVIEW LINK: Webflow - Black Women of Print

TIA
JS

BUMP! Has anyone done something like this? Do you thing it can be achieved in Weblfow

Hi @Johnelle_Smith here is very simple code (no conditions and error handling) to get an idea how it will work. If you are not familiar how to implement similar approach to WF you need to find developer who can do that for you.

let artists = [
  "Wanda Ewing",
  "Valerie Maynard",
  "Samella Lewis",
  "Ruth Charlotte Ellis",
  "Robin Holder",
  "Nanette Carter",
  "Mildred Thompson",
  "Mary Lovelace O’Neal",
  "Margaret T.G.Burroughs",
  "Loïs Mailou Jones",
  "Julie Mehretu",
  "Gwendolyn Knight",
  "Emma Amos",
  "Elizabeth Catlett",
  "Phyllis I. Thompson",
  "Chakaia Booker",
  "Camille Billops",
  "Betye Saar",
  "Belkis Ayón",
  "Barbara Jones-Hogu",
  "Alison Saar",
  "Margo Humphrey",
];

const alphabet = "abcdefghijklmnopqrstuvwxyz".toUpperCase().split(""); //?

const container = document.querySelector("#art-names"); //?..

// generate list of artists & alphabet 
function printList() {
  // GET alphabet and for each letter ..
  alphabet.forEach((letter) => {
    // .. create array of artists that starting with letter X
    const namesStartsWith = artists.filter((artist) =>
      artist.startsWith(`${letter}`)
    );

    // create div's for letters (alphabet)
    const letterDiv = document.createElement("div");
    letterDiv.classList.add("letter");
    letterDiv.innerHTML = `<h1>${letter}</h1>`;
    container.appendChild(letterDiv);

    // create div's for artists
    namesStartsWith.forEach((artistName) => {
      const artistThumb = document.createElement("div");
      artistThumb.classList.add("artist-thumb__c");
      artistThumb.innerHTML = `<h2>${artistName}</h2>`;
      container.appendChild(artistThumb);
    });
  });
}
printList();

here is simple result

Hi @Johnelle_Smith I have send solution after your bump but until now there is not any feedback from you. If you don’t have further questions feel free to close your issue as solved

Hi @Stan Thank you for your response. I will definitely get a developer who can help with that. Just a quick question, will I be able to use this method using collection lists. I want the client to be able to freely add to the list.

hi @Johnelle_Smith yes it is possible, I have add list of artists manually for demonstration purposes as I didn’t want to create full demo but only JS.

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.