如何结合Masonry与Diamonds.js实现可变尺寸菱形图片画廊？

Alright, let's figure out how to build that variable-size diamond image gallery you want, combining Diamonds.js and Masonry. I've worked through similar layout challenges before, so here's a step-by-step breakdown that should get you there:

1. Core Approach #

Diamonds.js excels at creating diamond-shaped elements but locks everything to a uniform size by default. Masonry is our go-to for fluid, irregular grid layouts. The plan is:

• Modify Diamonds.js to support custom width/height per diamond
• Let Masonry handle the positioning and flow of these variable-sized diamond blocks
• Keep Diamonds.js's core rotation logic to maintain the diamond visual style

2. Tweak Diamonds.js for Custom Sizes #

First, we need to override the plugin's hardcoded uniform size behavior. Here's how to adjust the key parts:

• Replace the fixed width/height assignments with values pulled from custom data attributes on each diamond element
• Make sure the rotation logic (for the diamond container and inner image) adapts to these custom dimensions

Modified Diamonds.js Snippet #

// Inside the Diamonds.js initialization logic, replace the fixed size setup
$item.each(function() {
  const $diamond = $(this);
  // Pull custom dimensions from data attributes, fall back to defaults if missing
  const customWidth = $diamond.data('diamond-width') || 150;
  const customHeight = $diamond.data('diamond-height') || 150;

  $diamond.css({
    width: customWidth,
    height: customHeight,
    transform: 'rotate(45deg)'
  });

  // Reverse-rotate the inner image and ensure it fits properly
  $diamond.find('img').css({
    width: '100%',
    height: '100%',
    objectFit: 'cover',
    transform: 'rotate(-45deg)'
  });
});

3. Integrate Masonry for Fluid Layout #

Now let Masonry take over the positioning. We'll disable Diamonds.js's built-in layout logic and let Masonry handle the grid flow:

Initialization Code #

// First, run our modified Diamonds.js (only handles diamond shaping, not layout)
$('.diamond-gallery').diamonds({
  autoLayout: false, // Disable plugin's default layout
  gap: 12 // Adjust spacing between diamonds as needed
});

// Initialize Masonry on the same container
$('.diamond-gallery').masonry({
  itemSelector: '.diamond-item',
  columnWidth: function(containerWidth) {
    // Dynamically set base column width for responsiveness
    return containerWidth / 4;
  },
  gutter: 12,
  fitWidth: true // Make gallery fit its container width
});

4. HTML Structure Example #

<div class="diamond-gallery">
  <!-- Large square diamond -->
  <div class="diamond-item" data-diamond-width="220" data-diamond-height="220">
    <img src="your-image-1.jpg" alt="Large diamond">
  </div>
  <!-- Small square diamond -->
  <div class="diamond-item" data-diamond-width="110" data-diamond-height="110">
    <img src="your-image-2.jpg" alt="Small diamond">
  </div>
  <!-- Wide rectangular diamond -->
  <div class="diamond-item" data-diamond-width="220" data-diamond-height="160">
    <img src="your-image-3.jpg" alt="Wide diamond">
  </div>
  <!-- Tall rectangular diamond -->
  <div class="diamond-item" data-diamond-width="160" data-diamond-height="220">
    <img src="your-image-4.jpg" alt="Tall diamond">
  </div>
</div>

5. Critical CSS Fixes #

Make sure diamonds and their images behave as expected:

.diamond-gallery {
  position: relative; /* Required for Masonry */
  margin: 0 auto;
}

.diamond-item {
  overflow: hidden; /* Clip image to diamond shape */
  position: absolute; /* Let Masonry position items */
}

.diamond-item img {
  display: block;
}

6. Responsive Adjustments #

To keep the gallery working across screen sizes:

// Re-layout on window resize
$(window).on('resize', function() {
  $('.diamond-gallery').masonry('layout');
  // Optional: Re-calculate diamond sizes for mobile if needed
});

Key Notes #

• Test different diamond ratios to ensure object-fit: cover keeps images from distorting
• Adjust Masonry's columnWidth based on your design's minimum diamond size
• If you don't want to modify the original Diamonds.js file, wrap the size logic in a custom wrapper function instead

内容的提问来源于stack exchange，提问作者Steve James