Dr3am3rz Dr3am3rz - 2 months ago 19
CSS Question

Masonry with static contents and load more button

I have a Testimonials page that is used with Masonry plugin. I will have a lot of Testimonials but it will only show 4 when the page load and the rest will be hidden, there will be a load more button below.

I have achieve what I want but there is 1 issue.

The load more button is showing at the bottom of the last testimonial which is what I want but, there is a big gap from the displayed testimonials to the load more button. The reason is because masonry has set my wrapper with a height that includes all my testimonials including the hidden ones.

Is there any way that I do so that my load more button will display directly below the displayed testimonials?

Here is my code in codepen.

<div class="testimonials">

<div class="container">
<div class="row">

<div class="testi-wrapper">
<div class="col-xs-12 col-md-6 grid-item">
<div class="testi-img"><img src="http://www.freedigitalphotos.net/images/img/homepage/87357.jpg" alt="" /></div>
<div class="testi-text">
<p class="name">Menaka Chandrashekhar, 32</p>
<div class="testi">
<p>I got my bee-utiful Alex Monroe bumble bee necklace from Annielka's Pop up shop at the MAAD market in the Red dot museum.</p>
<p>My hubby gifted me this neck piece for our third anniversary, a few weeks after I had been eyeing the fabulous jewellery on Annielka's website. The detailing of the bee pendant is simply exquisite..worthy of all the praise I've been getting about it :)</p>
</div>
<p class="location">Digital Designer | Queensland, Australia</p>
</div>
</div>



<div class="col-xs-12 col-md-6 grid-item">
<div class="testi-img"><img src="http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg" alt="" /></div>
<div class="testi-text">
<p class="name">Kirsten De Bruyn, 33</p>
<div class="testi">
<p>Bought my first 3 pieces at Annielka 2 weeks ago. Two massive rings and a very nice gold necklace. The pieces that Annielka sells are very different from what I have been able to find in Singapore. I personally like the bigger the better, but she also offers many other styles. The owner knows her stuff, and she advised me on the materials used in the pieces I was interested in so I knew what I was paying for. Very happy with my purchases and hope Annielka is here to stay. </p>
</div>
<p class="location">Director pricing, capacity and contracting Europe and global | Amsterdam, Holland</p>
</div>
</div>

<div class="col-xs-12 col-md-6 grid-item">
<div class="testi-img"><img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" alt="" /></div>
<div class="testi-text">
<p class="name">Menaka Chandrashekhar, 32</p>
<div class="testi">
<p>I got my bee-utiful Alex Monroe bumble bee necklace from Annielka's Pop up shop at the MAAD market in the Red dot museum.</p>
<p>My hubby gifted me this neck piece for our third anniversary, a few weeks after I had been eyeing the fabulous jewellery on Annielka's website. The detailing of the bee pendant is simply exquisite..worthy of all the praise I've been getting about it :)</p>
</div>
<p class="location">Digital Designer | Queensland, Australia</p>
</div>
</div>


<div class="col-xs-12 col-md-6 grid-item">
<div class="testi-img"><img src="http://eskipaper.com/images/images-4.jpg" alt="" /></div>
<div class="testi-text">
<p class="name">Kirsten De Bruyn, 33</p>
<div class="testi">
<p>Bought my first 3 pieces at Annielka 2 weeks ago. Two massive rings and a very nice gold necklace. The pieces that Annielka sells are very different from what I have been able to find in Singapore. I personally like the bigger the better, but she also offers many other styles. The owner knows her stuff, and she advised me on the materials used in the pieces I was interested in so I knew what I was paying for. Very happy with my purchases and hope Annielka is here to stay. </p>
</div>
<p class="location">Director pricing, capacity and contracting Europe and global | Amsterdam, Holland</p>
</div>
</div>


<div class="col-xs-12 col-md-6 grid-item">
<div class="testi-img"><img src="http://www.freedigitalphotos.net/images/img/homepage/87357.jpg" alt="" /></div>
<div class="testi-text">
<p class="name">Menaka Chandrashekhar, 32</p>
<div class="testi">
<p>I got my bee-utiful Alex Monroe bumble bee necklace from Annielka's Pop up shop at the MAAD market in the Red dot museum.</p>
<p>My hubby gifted me this neck piece for our third anniversary, a few weeks after I had been eyeing the fabulous jewellery on Annielka's website. The detailing of the bee pendant is simply exquisite..worthy of all the praise I've been getting about it :)</p>
</div>
<p class="location">Digital Designer | Queensland, Australia</p>
</div>
</div>



<div class="col-xs-12 col-md-6 grid-item">
<div class="testi-img"><img src="http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg" alt="" /></div>
<div class="testi-text">
<p class="name">Kirsten De Bruyn, 33</p>
<div class="testi">
<p>Bought my first 3 pieces at Annielka 2 weeks ago. Two massive rings and a very nice gold necklace. The pieces that Annielka sells are very different from what I have been able to find in Singapore. I personally like the bigger the better, but she also offers many other styles. The owner knows her stuff, and she advised me on the materials used in the pieces I was interested in so I knew what I was paying for. Very happy with my purchases and hope Annielka is here to stay. </p>
</div>
<p class="location">Director pricing, capacity and contracting Europe and global | Amsterdam, Holland</p>
</div>
</div>

<div class="col-xs-12 col-md-6 grid-item">
<div class="testi-img"><img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" alt="" /></div>
<div class="testi-text">
<p class="name">Menaka Chandrashekhar, 32</p>
<div class="testi">
<p>I got my bee-utiful Alex Monroe bumble bee necklace from Annielka's Pop up shop at the MAAD market in the Red dot museum.</p>
<p>My hubby gifted me this neck piece for our third anniversary, a few weeks after I had been eyeing the fabulous jewellery on Annielka's website. The detailing of the bee pendant is simply exquisite..worthy of all the praise I've been getting about it :)</p>
</div>
<p class="location">Digital Designer | Queensland, Australia</p>
</div>
</div>


<div class="col-xs-12 col-md-6 grid-item">
<div class="testi-img"><img src="http://eskipaper.com/images/images-4.jpg" alt="" /></div>
<div class="testi-text">
<p class="name">Kirsten De Bruyn, 33</p>
<div class="testi">
<p>Bought my first 3 pieces at Annielka 2 weeks ago. Two massive rings and a very nice gold necklace. The pieces that Annielka sells are very different from what I have been able to find in Singapore. I personally like the bigger the better, but she also offers many other styles. The owner knows her stuff, and she advised me on the materials used in the pieces I was interested in so I knew what I was paying for. Very happy with my purchases and hope Annielka is here to stay. </p>
</div>
<p class="location">Director pricing, capacity and contracting Europe and global | Amsterdam, Holland</p>
</div>
</div>
</div>


<div class="load-more">
<p><strong><em>Load More Thank You Notes</em></strong></p>
<button class="btn-more">Show More</button>
</div>
</div>
</div>
</div>


Thanks in advance guys!

Answer

the solutions are found when OP and I chat in the comments. Anyway, these are the main points:


  1. Timing of masonry initialization is important.

In the case above, the masonry is initialized before some of the content is hidden. Masonry plugin will set a fixed height to the containing div. Removing content after masonry initialization create an empty space at the bottom of the masonry containing div.

  1. the use of $grid.masonry('layout'); (http://masonry.desandro.com/methods.html#layout-masonry)

$grid.masonry('layout'); will re-layout the masonry. Every time content is added/removed/showed/hidden in masonry layout, it needs to be re-layout so that the new element can be position correctly. Example: https://codepen.io/jacobgoh101/full/xEkvNp/

  1. timing of $grid.masonry('layout'); is important

same reason as point 1. Do it after the 'showing/hiding/loading' is completed, or else the layout may go wrong.

  1. generally, you can use $grid.masonry('layout'); for an unlimited amount of time

That's all. Hope that this helps those who are using Masonry

Comments