Vanilla JavaScript实现Div自动分容器布局问题求助

Hey there! Let’s work through that infinite column layout issue you’re facing. It’s super common to run into snags when dealing with variable-height elements and dynamic container creation—let’s break down what might be going wrong, then fix it with a solid, tested approach.

Common Pitfalls That Cause This Issue #

First, let’s cover the usual suspects that lead to elements not switching containers properly:

• Incorrect height calculations: Forgetting to account for container padding, item margins, or already used space in the current container.
• Stale container references: Not updating your currentContainer variable when creating a new container, so elements keep getting dumped into the old one.
• Poor placement logic: Only checking if the item fits in the total container height (not the remaining available space).

Working Solution with Explanations #

Let’s build a corrected version step by step. First, here’s the base HTML/CSS setup, then the JavaScript logic:

HTML #

<!-- Wrapper to hold all our dynamic columns -->
<div class="container-wrapper"></div>

<!-- Your variable-height items -->
<div class="item" style="height: 100px;">Item 1</div>
<div class="item" style="height: 150px;">Item 2</div>
<div class="item" style="height: 80px;">Item 3</div>
<div class="item" style="height: 200px;">Item 4</div>
<div class="item" style="height: 120px;">Item 5</div>
<div class="item" style="height: 90px;">Item 6</div>

CSS #

.container-wrapper {
  display: flex;
  gap: 12px;
  padding: 10px;
  min-height: 400px; /* Fixed height for our columns to fill */
}

.new_container {
  background: #f5f5f5;
  padding: 8px;
  border-radius: 6px;
  min-width: 220px;
  max-height: 100%; /* Match wrapper's min-height */
  overflow: hidden; /* Hide overflow until we create a new column */
}

.item {
  background: white;
  margin-bottom: 8px;
  padding: 12px;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

Vanilla JavaScript #

document.addEventListener('DOMContentLoaded', () => {
  // Grab all our items and the wrapper for columns
  const items = document.querySelectorAll('.item');
  const wrapper = document.querySelector('.container-wrapper');

  // Track our current active column and how much space we've used in it
  let currentColumn = createNewColumn();
  let usedSpace = 0;

  // Helper function to create a new column and calculate its usable height
  function createNewColumn() {
    const column = document.createElement('div');
    column.classList.add('new_container');
    wrapper.appendChild(column);

    // Calculate usable height: total column height minus padding
    const styles = getComputedStyle(column);
    const paddingTop = parseInt(styles.paddingTop);
    const paddingBottom = parseInt(styles.paddingBottom);
    column.usableHeight = column.offsetHeight - paddingTop - paddingBottom;

    return column;
  }

  // Loop through each item and place it correctly
  items.forEach(item => {
    const itemTotalHeight = item.offsetHeight + parseInt(getComputedStyle(item).marginBottom);

    // Check if the item fits in the remaining space of the current column
    if (usedSpace + itemTotalHeight > currentColumn.usableHeight) {
      // Create a new column and reset used space
      currentColumn = createNewColumn();
      usedSpace = 0;
    }

    // Add the item to the current column and update used space
    currentColumn.appendChild(item);
    usedSpace += itemTotalHeight;
  });
});

Key Fixes & Notes #

• Accurate space tracking: We calculate the total space each item takes up (including its bottom margin) and add that to our usedSpace counter—no more missing space from margins!
• Usable height calculation: When creating a new column, we subtract its padding from its total height to get the actual space available for items.
• Dynamic column switching: As soon as an item won’t fit in the current column’s remaining space, we create a new one, update our currentColumn reference, and reset the space counter.
• DOM safety: We wrap everything in DOMContentLoaded to make sure all items are loaded before we start calculating heights.

Adjustments for Your Use Case #

If your columns need to adapt to different heights (like full viewport height), just modify the usableHeight calculation:

// For full viewport height columns
column.usableHeight = window.innerHeight - paddingTop - paddingBottom - 20; // Subtract wrapper padding if needed

内容的提问来源于stack exchange，提问作者El arquitecto