Replicate a responsive element/Masonry Effect

Design help General
1

Hi - If you scroll down to the grid on this website http://sunhouse-creative.com, you can see that as you change the browser size the icons move themselves to fit the screen. My client wants me to replicate this in their grid, does anyone know how to do it? You can see from my link that I am experimenting with images and background images in trying to achive this. The client also wants the full image to show all of the time. Any help apprecaited.

Here is my public share link: Webflow - Starke Creative
(how to access public share link)

2

I think you can achieve this by setting Transitions.

http://vincent.polenordstudio.fr/snap/w80m2.jpg

Try to put them on appropriate elements, start with transition “All”, and if it works try to locate what exactly transitions. because it’s not good at all to let Transitions to “All”, performance wise.

3

Thank you @vincent forgive me but could you provide me with a little more detail as I really can’t work out how to replicate this, apologies for being dumb, I’d blame it on Friday but…

Thank you

4

Hi @Roxzfr, I think what you are looking to achieve, is called a masonry layout. The masonry effect is not natively built in to Webflow yet, but there are some solutions.

Take a peek here: How to apply a masonry style to elements on a page - #6 by mastermindesign

I hope this helps!

5

Thank you @cyberdave, I will take a look this afternoon :slight_smile:

6

Hi @cyberdave this doesn’t seem to work, what I need to replicate is the images re-sizing themselves and moving to fit the browser window size. @vincent, you say it can be achieved through transitions - but how? Ihave until tomorrow to nail this so I would appreciate your help.

7

Here is the WordPress Theme - could I just copy the relevant code?

8

Hi @Roxzfr, thanks for the info.

I have created a sample masonry effect using the masonry plugin. Take a peek at the demo here: jQuery Masonry Effect Demo - Webflow

Take a peek at the styling for each class at each viewport.

Finally, paste following code in the Before Body of the page:

<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.1.1/masonry.pkgd.min.js"></script>
<script>
$( document ).ready(function() {
        $('#container').masonry({
  			itemSelector: '.item',
  			animationOptions: {
   		  duration: 500
  }
});
});
</script>

Publish the site and then preview. Here was my result, is this sort of what you are looking for? In the example, you can put any content you want in the item divs.

Here is the published site: http://masonry-effect.webflow.io/

I hope this helps

1 Like
9

Thanks @cyberdave that’s exactly what I need. I replicated it and had it working perfectly - I was so impressed! but now suddenly instead of moving the items around it just makes them smaller?

Would you mind taking a look at whatever stupid school girl error I have made please?

https://preview.webflow.com/preview/starke-creative?preview=4641f9ec9da40680f5949896053c542a

http://starke-creative.webflow.io/

Thank you so much, i really appreciate your help.

10

Hi there @Roxzfr, awesome job so far :slight_smile:

Take a peek here:

https://cl.ly/1Q1k0c302d0F/Screen%20Recording%202016-11-22%20at%2004.10%20PM.mov

I hope this helps! Remember to republish and check the results :=)

11

What happens if the images have different dimensions ?

12

Hi @Revolution, this example is only for images of same dimensions (in my example), there are different parameters that can be used in masonry and a bunch of different examples to show how elements can be arranged with different dimensions.

My example was the basic masonry effect that is setting columnWidth left out of the script, setting column width to item width.

This could also be used with images of different sizes, just set the width and height of the item class to auto, although some additional masonry settings might be needed.

13

Thank you @cyberdave, it was very considerate to make a video and very helpful. I have made the changes; however it still resizes the images rather than reordering them?

with regards to the 25%, the client wants 3 across, so at some stage I’ll probably need to resize the images.

I never thought a simple grid could be so complex! I appreciate all your efforts and if you can work out why it isn’t re-ordering it would be most appreciated.

14

Hi there @Roxzfr Change the widths of the item elements on each viewport, to control how many items per row show, at each viewport. When published, the site will resize accordingly.

Take a peek:

https://cl.ly/3e421N153S2o/Screen%20Recording%202016-11-25%20at%2007.43%20AM.mov

Does this help?

15

Thank you @cyberdave - yes it does. You did say this last time only I didn’t realise it was essential for the effect, so apologies for making you repeat yourself.

The only issue now is that my client wants a grid of 3 (not a problem) but the images are aligning in to the left so there is a huge amount of white space on the right. Its even worse on their huge Apple screens. It has to work exactly like their inspirational site http://sunhouse-creative.com/ including how the slider re-sizes.

I thought working with a graphic designer would make things easier - won’t make that mistake again :wink:

16

Hi @Roxzfr, try to style your container like this with flex, to center the items in the container:

Does that help?

17

Brilliant! Thank you @cyberdave - Really really appreciate you hand holding me through this :slight_smile:

18

Hi @Roxzfr, great, glad to hear that helped :slight_smile: No problem at all, that is the way Webflow rolls :slight_smile:

19

Hi again @cyberdave they now want a consistent distance between all of the elements at all viewpoints…
Is this possible?

20

Hi @Roxzfr, are you referring about the image elements in the masonry section?