所有元素的同位素边界

Question

I am using Isotope j Query plugin (Using masonry layout) to show images in my gallery... What i am trying to achieve is a border around all edges of the elements but not in between images.. so the border should only be on the outside and not in between images....

Example of border

I have no problem that the border will break between images so that's not an issue :)

I also need to consider that the user can filter the images so the border should dynamically adapt itself to the number of element and the way they are laid out on the screen.

Thanks all for your time.

This is the code i use

<div class="project">
    <div class="projects">
        <img src="path/to/image.jpg />
    </div>
    <div class="projects">
        <img src="path/to/image.jpg />
    </div>
    <div class="projects">
        <img src="path/to/image.jpg />
    </div>
</div>

And i run the isotope plugin:

$('.projects').isotope({
    itemSelector: '.project',
    originLeft: false,
    layoutMode: 'packery',
    packery: {
        gutter: 20
    }
});

The isotope itself works great..

I Tried styling with psuedos (first, nth etc...) but it didn't work well because the size of the images varies....

I thought about scanning the images and trying to figure out whether or not there is an item bordering it and setting proper style.. but i'm hoping to avoid this as this task can be very tedious... and I'm lazy ;)

Answer 1

I don't think there's an existing method or simple CSS solution to what you're trying to accomplish. It looks like Isotope positions each of the elements absolutely and maintains their position/coordinates behind the scenes; shimming the parent container open to a calculated height on the fly.

You might be able to use Isotope's .getfiltereditemelements() and loop through the resulting Array , comparing the width, height, and x/y coordinates to the dimensions of the parent to get an idea as to whether that element is an "edge" element — and whether it is likely a top-row or bottom-row element.