当您单击“显示全部”按钮时，它应该显示所有隐藏的内容，然后完成。然后网站的其余部分将单独跟随。但是当点击全部显示时，还有很多空白空间。
如果我没有使用 Freetile 插件，空白区域的高度对应于所有图块的高度。当不使用 Freetile 插件时，它不会发生。
我猜 Show More 插件无法识别 Freetile 插件忽略的间隙。我一直在玩代码很长时间并且已经没有想法了。
Freetile插件的设置：
$(document).ready(function() {
$('#content').freetile({
animate : true,
elementDelay : 250,
gutter: 10,
});
});
Show More jQuery插件的设置：
$(document).ready(function() {
$('.showmore').showMore({
speedDown: 300,
speedUp: 300,
height: '1000px',
showText: '» Show All',
hideText: '» Close'
});
});
HTML
<div class="showmore">
<div id="content" class="social" style="font-size:11pt;margin:0px -6px 0 -6px;">
<div class="item mar col1" >
<div>
<a href="http://www.amazon.co.uk/gp/product/B00521L6Y6/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B00521L6Y6&linkCode=as2&tag=4dese4chil-21"><img style="width:100%;" src="http://ecx.images-amazon.com/images/I/41HHgiOb7%2BL._SX400_CR0,0,400,500_.jpg" alt="OSPREY HORNET 32 OS50352" /></a>
</div>
<div class="pad">
<p style="font-size:12px;font-weight:bold;text-align:right;">e.g. <a href="http://www.amazon.co.uk/gp/product/B00521L6Y6/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B00521L6Y6&linkCode=as2&tag=4dese4chil-21">Osprey Hornet 32</a></p>
<h4>Backpack</h4>
<div class="dscr">
<ul><li>Lightweight and durable</li>
<li>25-30L Capacity</li>
<li>Hold all equipment
</li></ul>
</div>
<div class="qty"><div class="qtyc">Quantity</div>
<div class="qtyr">2</div>
</div>
<div ><a target="_blank" style="text-decoration: none;" class="buttongetwl" href="http://www.amazon.co.uk/gp/registry/wishlist/3B0B2RVKZIQRT/?ie=UTF8&camp=1634&creative=19450&linkCode=ur2&tag=4dese4chil-21">Send Us This via Amazon</a></div>
<div style="clear:both;"></div>
</div>
</div>
<div class="item mar col1" >
<a href="http://www.amazon.co.uk/gp/product/B000RZQI68/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B000RZQI68&linkCode=as2&tag=4dese4chil-21"><img style="width:100%;" src="http://ecx.images-amazon.com/images/I/71NjGJ7STYL._SX500_.jpg" ></a>
<div class="pad"><p style="font-size:12px;font-weight:bold;text-align:right;">e.g. <a href="http://www.amazon.co.uk/gp/product/B000RZQI68/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B000RZQI68&linkCode=as2&tag=4dese4chil-21">Coghlan's Featherweight Mirror</a></p>
<h4>Mirror</h4>
<div class="dscr">
<ul><li>Safety equipment</li>
<li>Attract attention in</li>
<li>emergency situations
</li></ul>
</div>
<div class="qty"><div class="qtyc">Quantity</div><div class="qtyr">2</div></div>
<div ><a target="_blank" style="text-decoration: none;" class="buttongetwl" href="http://www.amazon.co.uk/gp/registry/wishlist/3B0B2RVKZIQRT/?ie=UTF8&camp=1634&creative=19450&linkCode=ur2&tag=4dese4chil-21">Send Us This via Amazon</a></div>
<div style="clear:both;"></div>
</div>
</div>
<div class="item mar col1" >
<a href="http://www.amazon.co.uk/gp/product/B003UFL28Q/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B003UFL28Q&linkCode=as2&tag=4dese4chil-21"><img style="width:100%;" src="http://ecx.images-amazon.com/images/I/81o0-lh%2BYYL._SL500_CR17,60,420,210_.jpg" ></a>
<div class="pad"><p style="font-size:12px;font-weight:bold;text-align:right;">e.g. <a href="http://www.amazon.co.uk/gp/product/B003UFL28Q/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B003UFL28Q&linkCode=as2&tag=4dese4chil-21">Black Diamond Cosmo LED</a></p>
<h4>Headlamp</h4>
<div class="dscr">
<ul><li>Main and backup required</li>
<li>Bright enough to use at night</li>
<li>Long battery life
</li></ul>
</div>
<div class="qty"><div class="qtyc">Quantity</div><div class="qtyr">4</div></div>
<div ><a target="_blank" style="text-decoration: none;" class="buttongetwl" href="http://www.amazon.co.uk/gp/registry/wishlist/3B0B2RVKZIQRT/?ie=UTF8&camp=1634&creative=19450&linkCode=ur2&tag=4dese4chil-21">Send Us This via Amazon</a></div>
<div style="clear:both;"></div>
</div>
</div>
<div class="item mar col1" >
<a href="http://www.amazon.co.uk/gp/product/B002JOV608/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B002JOV608&linkCode=as2&tag=4dese4chil-21"><img style="width:100%;" src="http://ecx.images-amazon.com/images/I/410UQXfm9zL.jpg" ></a>
<div class="pad"><p style="font-size:12px;font-weight:bold;text-align:right;">e.g. <a href="http://www.amazon.co.uk/gp/product/B002JOV608/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B002JOV608&linkCode=as2&tag=4dese4chil-21">Silva Companion 9 Compass</a></p>
<h4>Compass</h4>
<div class="dscr">
<ul><li>Any reliable model</li>
<li>Part of emergency gear</li>
</ul>
</div>
<div class="qty"><div class="qtyc">Quantity</div><div class="qtyr">2</div></div>
<div ><a target="_blank" style="text-decoration: none;" class="buttongetwl" href="http://www.amazon.co.uk/gp/registry/wishlist/3B0B2RVKZIQRT/?ie=UTF8&camp=1634&creative=19450&linkCode=ur2&tag=4dese4chil-21">Send Us This via Amazon</a></div>
<div style="clear:both;"></div>
</div>
</div>
<div class="item mar col1" >
<a href="http://www.amazon.co.uk/gp/product/B000ZOX2SI/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B000ZOX2SI&linkCode=as2&tag=4dese4chil-21"><img style="width:100%;" border="0" src="http://ecx.images-amazon.com/images/I/21f8ms3bDLL._sx500_CR0,60,200,125_.jpg" ></a>
<div class="pad"><p style="font-size:12px;font-weight:bold;text-align:right;">e.g. <a href="http://www.amazon.co.uk/gp/product/B000ZOX2SI/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B000ZOX2SI&linkCode=as2&tag=4dese4chil-21">Safety Pins</a></p>
<h4>Safety Pins</h4>
<div class="dscr">
<ul><li>Larger size is better</li>
<li>At least 20 each</li>
<li>Attach things to clothes</li>
</ul>
</div>
<div class="qty"><div class="qtyc">Quantity</div><div class="qtyr">1</div></div>
<div ><a target="_blank" style="text-decoration: none;" class="buttongetwl" href="http://www.amazon.co.uk/gp/registry/wishlist/3B0B2RVKZIQRT/?ie=UTF8&camp=1634&creative=19450&linkCode=ur2&tag=4dese4chil-21">Send Us This via Amazon</a></div>
<div style="clear:both;"></div>
</div>
</div>
<div class="item mar col1" >
<a href="http://www.amazon.co.uk/gp/product/B002CJNE0K/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B002CJNE0K&linkCode=as2&tag=4dese4chil-21"><img style="width:100%;" border="0" src="http://ecx.images-amazon.com/images/I/61Neht3qZ1L._SL500_CR0,20,480,430_.jpg" ></a>
<div class="pad"><p style="font-size:12px;font-weight:bold;text-align:right;">e.g. <a href="http://www.amazon.co.uk/gp/product/B002CJNE0K/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B002CJNE0K&linkCode=as2&tag=4dese4chil-21">Leatherman Freestyle Multi-Tool</a></p>
<h4>Knife/Multitool</h4>
<div class="dscr">
<ul><li>Good quality</li>
<li>Lightweight</li>
</ul>
</div>
<div class="qty"><div class="qtyc">Quantity</div><div class="qtyr">2</div></div>
<div ><a target="_blank" style="text-decoration: none;" class="buttongetwl" href="http://www.amazon.co.uk/gp/registry/wishlist/3B0B2RVKZIQRT/?ie=UTF8&camp=1634&creative=19450&linkCode=ur2&tag=4dese4chil-21">Send Us This via Amazon</a></div>
<div style="clear:both;"></div>
</div>
</div>
<div class="item mar col1" >
<a href="http://www.amazon.co.uk/gp/product/B000WY2962/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B000WY2962&linkCode=as2&tag=4dese4chil-21"><img style="width:100%;" border="0" src="http://ecx.images-amazon.com/images/I/610124OOlXS._SL500_.jpg" ></a>
<div class="pad"><p style="font-size:12px;font-weight:bold;text-align:right;">e.g. <a href="http://www.amazon.co.uk/gp/product/B000RZQI68/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B000RZQI68&linkCode=as2&tag=4dese4chil-21">Adventure Medical Kits ThermoLite</a></p>
<h4>Survival Bivvy / Blanket</h4>
<div class="dscr">
<ul><li>Lightweight</li>
<li>Reflective material</li>
<li>Emergency survival gear</li>
</ul>
</div>
<div class="qty"><div class="qtyc">Quantity</div><div class="qtyr">2</div></div>
<div ><a target="_blank" style="text-decoration: none;" class="buttongetwl" href="http://www.amazon.co.uk/gp/registry/wishlist/3B0B2RVKZIQRT/?ie=UTF8&camp=1634&creative=19450&linkCode=ur2&tag=4dese4chil-21">Send Us This via Amazon</a></div>
<div style="clear:both;"></div>
</div>
</div>
<div class="item mar col1">
<a href="http://www.amazon.co.uk/gp/product/B005GJL8AG/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B005GJL8AG&linkCode=as2&tag=4dese4chil-21"><img style="width:100%;" border="0" src="http://ecx.images-amazon.com/images/I/61gUUUdjQwL._SL500_CR115,15,260,470_.jpg" ></a>
<div class="pad"><p style="font-size:12px;font-weight:bold;text-align:right;">e.g. <a href="http://www.amazon.co.uk/gp/product/B005GJL8AG/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B005GJL8AG&linkCode=as2&tag=4dese4chil-21">Bushman Plus Dry Gel-75g</a></p>
<h4>Sunscreen</h4>
<div class="dscr">
<ul><li>High SPF</li>
<li>Waterproof, sweat proof, and non-greasy</li>
<li>Insect repellent</li></ul>
</div>
<div class="qty"><div class="qtyc">Quantity</div><div class="qtyr">4</div></div>
<div ><a target="_blank" style="text-decoration: none;" class="buttongetwl" href="http://www.amazon.co.uk/gp/registry/wishlist/3B0B2RVKZIQRT/?ie=UTF8&camp=1634&creative=19450&linkCode=ur2&tag=4dese4chil-21">Send Us This via Amazon</a></div>
<div style="clear:both;"></div>
</div>
</div>
<div class="item mar col1" >
<a href="http://www.amazon.co.uk/gp/product/B000MWDS8C/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B000MWDS8C&linkCode=as2&tag=4dese4chil-21"><img style="width:100%;"border="0" src="http://ecx.images-amazon.com/images/I/61DmLSoRpXL._SL500_.jpg" ></a>
<div class="pad"><p style="font-size:12px;font-weight:bold;text-align:right;">e.g. <a href="http://www.amazon.co.uk/gp/product/B000MWDS8C/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B000MWDS8C&linkCode=as2&tag=4dese4chil-21">Dermatone Spot Protection Stick</a></p>
<h4>Lip Sunscreen</h4>
<div class="dscr">
<ul><li>High SPF</li>
<li>Waterproof, sweat proof, and non-greasy</li></ul>
</div>
<div class="qty"><div class="qtyc">Quantity</div><div class="qtyr">2</div></div>
<div ><a target="_blank" style="text-decoration: none;" class="buttongetwl" href="http://www.amazon.co.uk/gp/registry/wishlist/3B0B2RVKZIQRT/?ie=UTF8&camp=1634&creative=19450&linkCode=ur2&tag=4dese4chil-21">Send Us This via Amazon</a></div>
<div style="clear:both;"></div>
</div>
</div>
<div class="item mar col1" >
<a href="http://uk.racingtheplanet.com/store/gear/footcare/footcare/blister-kit.html"><img style="width:100%;"border="0" src="/img/project/blisterkit.jpg" ></a>
<div class="pad"><p style="font-size:12px;font-weight:bold;text-align:right;">e.g. <a href="http://uk.racingtheplanet.com/store/gear/footcare/footcare/blister-kit.html">RacingThePlanet® Blister Kit</a></p>
<h4>Blister Kit</h4>
<div class="dscr">
<ul><li>Alcohol Wipes</li>
<li>Hypodermic Needles</li>
<li>Roll of paper tape</li>
<li>Roll of elastic tape</li>
<li>Second Skin or Compede pads</li>
</ul>
</div>
<div class="qty"><div class="qtyc">Quantity</div><div class="qtyr">4</div></div>
<div ><a target="_blank" style="text-decoration: none;" class="buttongetwl" href="http://www.amazon.co.uk/gp/registry/wishlist/3B0B2RVKZIQRT/?ie=UTF8&camp=1634&creative=19450&linkCode=ur2&tag=4dese4chil-21">Send Us This via Amazon</a></div>
<div style="clear:both;"></div>
</div>
</div>
<div class="item mar col1" >
<a href="http://www.amazon.co.uk/gp/product/B004VNWHKS/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B004VNWHKS&linkCode=as2&tag=4dese4chil-21"><img style="width:70%;"border="0" src="
http://ecx.images-amazon.com/images/I/31J1-eZyvSL.CR150,25,195,460_.jpg" ></a>
<div class="pad"><p style="font-size:12px;font-weight:bold;text-align:right;">e.g. <a href="http://www.amazon.co.uk/gp/product/B004VNWHKS/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B004VNWHKS&linkCode=as2&tag=4dese4chil-21">Purell Hygenic Hand Sanitiser Gel</a></p>
<h4>Sanitiser</h4>
<div class="dscr">
<ul><li>Necessary kit</li>
<li>Alcohol gel</li></ul>
</div>
<div class="qty"><div class="qtyc">Quantity</div><div class="qtyr">4</div></div>
<div ><a target="_blank" style="text-decoration: none;" class="buttongetwl" href="http://www.amazon.co.uk/gp/registry/wishlist/3B0B2RVKZIQRT/?ie=UTF8&camp=1634&creative=19450&linkCode=ur2&tag=4dese4chil-21">Send Us This via Amazon</a></div>
<div style="clear:both;"></div>
</div>
</div>
<div class="item mar col1" >
<a href="http://www.amazon.co.uk/gp/product/B005G3WTZU/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B005G3WTZU&linkCode=as2&tag=4dese4chil-21"><img style="width:100%;" border="0" src="http://ecx.images-amazon.com/images/I/71ZOBDNORCL._SL500_CR60,20,470,390_.jpg" ></a>
<div class="pad"><p style="font-size:12px;font-weight:bold;text-align:right;">e.g. <a href="http://www.amazon.co.uk/gp/product/B005G3WTZU/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B005G3WTZU&linkCode=as2&tag=4dese4chil-21">Huggies Pure Baby Wipes - 10 x Packs of 64</a></p>
<h4>Toilet Paper/Baby-wipes</h4>
<div class="dscr">
<ul><li>Necessary!!</li></ul>
</div>
<div class="qty"><div class="qtyc">Quantity</div><div class="qtyr">2</div></div>
<div ><a target="_blank" style="text-decoration: none;" class="buttongetwl" href="http://www.amazon.co.uk/gp/registry/wishlist/3B0B2RVKZIQRT/?ie=UTF8&camp=1634&creative=19450&linkCode=ur2&tag=4dese4chil-21">Send Us This via Amazon</a></div>
<div style="clear:both;"></div>
</div>
</div>
<div class="item mar col1" >
<a href="http://www.amazon.co.uk/gp/product/B005XM5PSC/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B005XM5PSC&linkCode=as2&tag=4dese4chil-21"><img style="width:100%;" border="0" src="http://ecx.images-amazon.com/images/I/81nog6%2ByazL._SL500_.jpg" ></a>
<div class="pad"><p style="font-size:12px;font-weight:bold;text-align:right;">e.g. <a href="http://www.amazon.co.uk/gp/product/B005XM5PSC/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B005XM5PSC&linkCode=as2&tag=4dese4chil-21">Rolson Red LED Clip On Light</a></p>
<h4>Red Flashing Light</h4>
<div class="dscr">
<ul><li>In addition to other lights</li>
<li>Safety attachment</li></ul>
</div>
<div class="qty"><div class="qtyc">Quantity</div><div class="qtyr">2</div></div>
<div ><a target="_blank" style="text-decoration: none;" class="buttongetwl" href="http://www.amazon.co.uk/gp/registry/wishlist/3B0B2RVKZIQRT/?ie=UTF8&camp=1634&creative=19450&linkCode=ur2&tag=4dese4chil-21">Send Us This via Amazon</a></div>
<div style="clear:both;"></div>
</div>
</div>
<div class="item mar col1" >
<a href="http://www.amazon.co.uk/gp/product/B00E12MUZQ/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B00E12MUZQ&linkCode=as2&tag=4dese4chil-21"><img style="width:100%;"border="0" src="http://ecx.images-amazon.com/images/I/61VePN%2B04VL._SL500_CR130,30,240,430_.jpg" ></a>
<div class="pad"><p style="font-size:12px;font-weight:bold;text-align:right;">e.g. <a href="http://www.amazon.co.uk/gp/product/B00E12MUZQ/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B00E12MUZQ&linkCode=as2&tag=4dese4chil-21">Elastocrepe Cotton Crepe Bandage</a></p>
<h4>Compression Bandage</h4>
<div class="dscr">
<ul><li>Part of emergency equipment</li></ul>
</div>
<div class="qty"><div class="qtyc">Quantity</div><div class="qtyr">2</div></div>
<div ><a target="_blank" style="text-decoration: none;" class="buttongetwl" href="http://www.amazon.co.uk/gp/registry/wishlist/3B0B2RVKZIQRT/?ie=UTF8&camp=1634&creative=19450&linkCode=ur2&tag=4dese4chil-21">Send Us This via Amazon</a></div>
<div style="clear:both;"></div>
</div>
</div>
<div class="item mar col1" >
<a href="http://www.amazon.co.uk/gp/product/B0046FUSMK/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B0046FUSMK&linkCode=as2&tag=4dese4chil-21"><img style="width:100%;"border="0" src="http://ecx.images-amazon.com/images/I/413dsb79QVL._SL500_CR30,0,340,400.jpg" ></a>
<div class="pad"><p style="font-size:12px;font-weight:bold;text-align:right;">e.g. <a href="http://www.amazon.co.uk/gp/product/B0046FUSMK/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B0046FUSMK&linkCode=as2&tag=4dese4chil-21">Montane Featherlite Marathon Jacket</a></p>
<h4>Jacket</h4>
<div class="dscr">
<ul><li>Lightweight</li>
<li>Good weather protection</li></ul>
</div>
<div class="qty"><div class="qtyc">Quantity</div><div class="qtyr">2</div></div>
<div ><a target="_blank" style="text-decoration: none;" class="buttongetwl" href="http://www.amazon.co.uk/gp/registry/wishlist/3B0B2RVKZIQRT/?ie=UTF8&camp=1634&creative=19450&linkCode=ur2&tag=4dese4chil-21">Send Us This via Amazon</a></div>
<div style="clear:both;"></div>
</div>
</div>
<div class="item mar col1" >
<a href="http://www.amazon.co.uk/gp/product/B00591HK62/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B00591HK62&linkCode=as2&tag=4dese4chil-21"><img style="width:100%;" border="0" src="http://ecx.images-amazon.com/images/I/41ZVnGK%2BmIL.jpg" ></a>
<div class="pad"><p style="font-size:12px;font-weight:bold;text-align:right;">e.g. <a href="http://www.amazon.co.uk/gp/product/B00591HK62/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B00591HK62&linkCode=as2&tag=4dese4chil-21">2XU Men's PWX Compression Baselayer</a></p>
<h4>Shorts</h4>
<div class="dscr">
<ul><li>Lightweight</li>
<li>Performance compression</li></ul>
</div>
<div class="qty"><div class="qtyc">Quantity</div><div class="qtyr">2</div></div>
<div ><a target="_blank" style="text-decoration: none;" class="buttongetwl" href="http://www.amazon.co.uk/gp/registry/wishlist/3B0B2RVKZIQRT/?ie=UTF8&camp=1634&creative=19450&linkCode=ur2&tag=4dese4chil-21">Send Us This via Amazon</a></div>
<div style="clear:both;"></div>
</div>
</div>
</div>
</div>