Высота переменной кладки с кавычками блока твиттера, вызывающими много свободного места
Я пробовал много вещей от чистого CSS до дерева и кирпичной кладки, но я все еще не достиг того, что ищу. Я извлекаю цитаты из API твиттера, и они имеют переменную высоту, в результате чего библиотека кладочной жидкости / адаптивного макета оставляет много пустого пространства.
* {
margin: 0; padding: 0;
list-style-type: none;
}
@media only screen and (max-width : 1199px),
only screen and (max-device-width : 1199px){
#container {
width: 1000px;
}
}
@media only screen and (max-width : 999px),
only screen and (max-device-width : 999px){
#container {
width: 800px;
}
}
@media only screen and (max-width : 799px),
only screen and (max-device-width : 799px){
#container {
width: 600px;
}
}
@media only screen and (max-width : 599px),
only screen and (max-device-width : 599px){
#container {
width: 400px;
}
}
@media only screen and (max-width : 399px),
only screen and (max-device-width : 399px){
#container {
width: 200px;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="description" content="description">
<title>Masonry</title>
<link rel="stylesheet" type="text/css" media="screen" href="mas.css"/>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</head>
<body>
<div id="container">
<div class="masonryImage">
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">I believe in the power of prayer! Thx 4 ur prayers Lammy- So happy Kendall & I could make u smile 2day God is good! http://t.co/T50WNEnmOL</p><a href="https://twitter.com/KimKardashian/status/655606616943792128"></a></blockquote>
</div>
<div class="masonryImage"> <blockquote class="twitter-tweet"><p lang="en" dir="ltr">What are you waiting for? @elliegoulding http://t.co/Tn2Q2IjiJ4</p><a href="https://twitter.com/taylorswift13/status/655633886911688704"></a></blockquote>
</div>
<div class="masonryImage"><blockquote class="twitter-tweet"><p lang="en" dir="ltr">Discovered fuel for the finish line in Costa Rica(aka liquid gold) http://t.co/lNUqEoKK0G</p><a href="https://twitter.com/katyperry/status/655839133718331393"></a></blockquote>
</div>
<div class="masonryImage"><blockquote class="twitter-tweet"><p lang="en" dir="ltr">I want to be a parrot head #vegas #jimmybuffett #winning http://t.co/6HibvCwVWt</p><a href="https://twitter.com/Pink/status/655621234655260672"></a></blockquote>
</div>
<div class="masonryImage"><blockquote class="twitter-tweet"><p lang="en" dir="ltr">So lucky to have worked with the great Steven Meisel throughout my career! #luckyme ❤️ #rebelheart http://t.co/uc7shV3xoQ</p><a href="https://twitter.com/Madonna/status/655123351468417024"></a></blockquote>
</div>
<div class="masonryImage"><blockquote class="twitter-tweet"><p lang="en" dir="ltr">In the weekly address, President Obama discusses the steps needed to fix our criminal justice system. http://t.co/TIkMUi58f5</p><a href="https://twitter.com/BarackObama/status/655433293710667776"></a></blockquote>
</div>
<div class="masonryImage"><blockquote class="twitter-tweet"><p lang="en" dir="ltr">A beautiful map for a beautiful idea: ending “a scourge that kills 450,000 people a year, within a generation.” https://t.co/nO3bJtuDWG</p><a href="https://twitter.com/BillGates/status/655748668579016705"></a></blockquote>
</div>
<div class="masonryImage"><blockquote class="twitter-tweet"><p lang="en" dir="ltr">Word https://t.co/bvAnJmCodL</p><a href="https://twitter.com/elliegoulding/status/655459223216611328"></a></blockquote>
</div>
<div class="masonryImage"><blockquote class="twitter-tweet"><p lang="en" dir="ltr">Watch me LIVE from @AMfestival2015 tonight !!! http://t.co/CdcD3T27NZ
#AMF2015 http://t.co/0TP77CSrHZ</p><a href="https://twitter.com/davidguetta/status/655504119592034305"></a></blockquote>
</div>
<div class="masonryImage"><blockquote class="twitter-tweet"><p lang="en" dir="ltr">[POST GAME REACTIONS] #Neymar speaks to the press after four goal outburst: http://t.co/eTN3rY93ly http://t.co/V6p5N4FwWW</p><a href="https://twitter.com/FCBarcelona/status/655518908967985152"></a></blockquote>
</div>
<div class="masonryImage"><blockquote class="twitter-tweet"><p lang="en" dir="ltr">I think someone is playing with my account Smh...</p><a href="https://twitter.com/RomeluLukaku9/status/655667746202648576"></a></blockquote>
</div>
<div class="masonryImage"><blockquote class="twitter-tweet"><p lang="en" dir="ltr">In 4 hours: Tune in tonight kicking off live from Koln #U2ieTour #meerkat http://t.co/HmK8R79pY7</p><a href="https://twitter.com/U2/status/655399109801603072"></a></blockquote>
</div>
<div class="masonryImage"><blockquote class="twitter-tweet"><p lang="en" dir="ltr">Bye #Zurich!✌️ Love you! ❤️ Taking off to #Shanghai! ✈️ @ Zürich, Switzerland https://t.co/ldHLV0fQQL</p><a href="https://twitter.com/ParisHilton/status/653534680407535616"></a></blockquote>
</div>
<div class="masonryImage"><blockquote class="twitter-tweet"><p lang="und" dir="ltr">Whaaaaa! https://t.co/icXlP6EDXr</p><a href="https://twitter.com/Enzoknol/status/655372441963909124"></a></blockquote>
</div>
<div class="masonryImage"><blockquote class="twitter-tweet"><p lang="nl" dir="ltr">Trots op mijn broertje met zijn nieuwe boek! Bestel hem zelf op http://t.co/kof54In7PO https://t.co/asSpIAgueT</p><a href="https://twitter.com/MilanKnol/status/655334693789937664"></a></blockquote>
</div>
<div class="masonryImage"><blockquote class="twitter-tweet"><p lang="nl" dir="ltr">Fanatiek zijn en jezelf 100% geven, vuistje @Jindravs. En daarover deze, must read. @KnackWeekend http://t.co/7hlPqku4iQ</p><a href="https://twitter.com/JoyThielemans/status/655369155059806208"></a></blockquote>
</div>
<div class="masonryImage"><blockquote class="twitter-tweet"><p lang="nl" dir="ltr">Vanavond weer een nieuwe Roadtrippers! JayJay heeft zijn milkshake al klaarstaan!
17:00u … http://t.co/Lp0NeFX2bg http://t.co/iQWzgGv1q1</p><a href="https://twitter.com/StukTV/status/655311382460637184"></a></blockquote></div>
<div class="masonryImage"><blockquote class="twitter-tweet"><p lang="nl" dir="ltr">IK GA HEM NEERHALEN! - SOMA #4 (Elke zaterdag om 20:00) http://t.co/mKSE2Gpxle</p><a href="https://twitter.com/GameMeneer/status/655444405264846848"></a></blockquote>
</div>
<div class="masonryImage"><blockquote class="twitter-tweet"><p lang="und" dir="ltr"> #nomakeup #nofilter http://t.co/6Fzb5WxJZa</p><a href="https://twitter.com/Astridbryan/status/655465649100079104"></a></blockquote>
</div>
<div class="masonryImage"><blockquote class="twitter-tweet"><p lang="nl" dir="ltr">Kaarsjes voor de gezelligheid :) #100Days
#DailyLifeInUnderwear #day62 http://t.co/Yry7oQ8HQE</p><a href="https://twitter.com/Lap_zeg/status/655352692164939776"></a></blockquote></div>
<div class="masonryImage"><blockquote class="twitter-tweet"><p lang="nl" dir="ltr">Echt iedereen zet De Pet op tegen Kanker, zelfs Manneken Pis! #depetop http://t.co/Bm4YerUF3r http://t.co/lHv4HZSWxA</p><a href="https://twitter.com/Ketnet/status/655386717512404992"></a></blockquote>
</div>
<div class="masonryImage"><blockquote class="twitter-tweet"><p lang="nl" dir="ltr">Greg Van Avermaet is Flandrien 2015: @stijnvlaeminck bracht hem champagne & een boodschap van @siskaschoeters. http://t.co/SHDVcX8BoC</p><a href="https://twitter.com/stubru/status/654959342517665792"></a></blockquote>
</div>
<div class="masonryImage"><blockquote class="twitter-tweet"><p lang="en" dir="ltr">RT @CELEBUZZ: Queen of Pop and TV and Calling the Internet a Toilet @LadyGaga opens up about depression: http://t.co/Y62L2usPss</p><a href="https://twitter.com/ladygaga/status/655424500087975936"></a></blockquote>
</div>
<div class="masonryImage"><blockquote class="twitter-tweet"><p lang="en" dir="ltr">RT @DJmag: An incredible year for @yvesv who climbs 21 places to No. 34 #Top100DJs @7UP http://t.co/1BZqWRomSb</p><a href="https://twitter.com/tomorrowland/status/655112470168637440"></a></blockquote>
</div>
<div class="masonryImage"><blockquote class="twitter-tweet"><p lang="es" dir="ltr">RT @LoveRocks: Pasa el nivel 12 en #LoveRocks para descargar el album "She Wolf" gratis!
*Oferta para ciertas plataformas y países</p><a href="https://twitter.com/shakira/status/655775058078617600"></a></blockquote>
</div>
<div class="masonryImage"><blockquote class="twitter-tweet"><p lang="en" dir="ltr">RT @Andrew_Rayel: @dimitrivegas & @likemike congrats!</p><a href="https://twitter.com/dimitrivegas/status/655355357271891969"></a></blockquote>
</div>
<div class="masonryImage"><blockquote class="twitter-tweet"><p lang="en" dir="ltr">RT @Andy_zrclast: @dimitrivegas @likemike well earned guys.They are the best. <3 <3</p><a href="https://twitter.com/likemike/status/655218796953784320"></a></blockquote>
</div>
<div class="masonryImage"><blockquote class="twitter-tweet"><p lang="nl" dir="ltr">RT @Studio100Update: TV-TIP | Vanavond zijn o.a. Gert Verhulst en @Koen_Crucke te gast bij #JonasEnVangeel om 22.40 uur op @VTM!</p><a href="https://twitter.com/VTM/status/654983597015875584"></a></blockquote>
</div>
<div class="masonryImage"><blockquote class="twitter-tweet"><p lang="nl" dir="ltr">RT @Goomuin: Vandaag de #trambus uitgetest, heerlijk comfortabel en ruim, mogen er gerust meer van komen :D @delijn http://t.co/aNISM4OabH</p><a href="https://twitter.com/VincentVQ/status/655118499979898880"></a></blockquote>
</div>
<div class="masonryImage"><blockquote class="twitter-tweet"><p lang="nl" dir="ltr">RT @Ashton_Reports: Overwint Geert Hoste afkeer voor witte peper http://t.co/TB2pAyC5DA @DumontSofie @keukenvansofie @geerthoste @VTM http:…</p><a href="https://twitter.com/DumontSofie/status/653645570477830146"></a></blockquote>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>
<script>
$(function(){
var $container = $('#container');
$(window).load(function(){
$container.masonry({
itemSelector : '.masonryImage'
});
});
});
</script>
</body>
</html>