गैर वर्दी ग्रिड फ्लोट

Question

अरे मैं एक फ्लोटिंग ग्रिड बनाने की कोशिश कर रहा हूं जिसमें विभिन्न आकार हैं।http://imgur.com/a/wXQfA

आप देख सकते हैं क्षैतिज टुकड़ा के तहत एक अंतर है:

यहाँ मेरा लक्ष्य है और क्या चल क्या रहा है। मैं किसी भी स्थिति का उपयोग किए बिना इसे ठीक करने की कोशिश कर रहा हूं ताकि मैं बाद में बक्से जोड़ सकूं या उन्हें चारों ओर ले जा सकूं।

कोड: एचटीएमएल

 <li class="mediumBox"> 
      <a href="#"><img src="..." height="205" width="430"></a> 
     </li> 

     <li class="largeBox"> 
      <a href="#"><img src="..." height="430" width="430"></a> 
     </li> 

     <li class="verticleMediumBox"> 
      <a href="#"><img src="..." height="430" width="205"></a> 
     </li> 

     <li class="smallBox"> 
      <a href="#"><img src="..." height="205" width="205"></a> 
     </li> 

     <li class="smallBox"> 
      <a href="#"><img src="..." height="205" width="205"></a> 
     </li> 

     <li class="smallBox"> 
      <a href="#"><img src="..." height="205" width="205"></a> 
     </li> 

     <li class="smallBox"> 
      <a href="#"><img src="..." height="205" width="205"></a> 
     </li> 
    </ul> 
</div> 
</body> 

Css: किसी कारण jsFiddle संस्करण मेरी क्रोम संस्करण की तरह नहीं दिखता लिएhttp://jsfiddle.net/jw7pV/ :

body{ 
background-color: #fffdf9; 
height: 100%; 
width: 100%; 
} 

#content{ 
background-color: red; 
height: auto; 
width: 900px; 
margin: 5em auto 0 auto; 
} 

#work ul{ 
list-style: none; 

} 

#work li{ 
float: left; 
margin: 10px; 
} 

#work li >a{ 
display: block; 
} 

#work li .smallBox{ 
float: left; 
display: block; 
} 

#work li .mediumBox{ 
float: left; 
display: block; 
} 

#work li .verticleMediumBox{ 
float: left; 
display: block; 
} 

#work li .largeBox{ 
float: left; 
display: block; 
} 

यहाँ मेरी कोड है ।

Answer 1

संपादित करें: क्षमा करें पहली बार आपको गतिशील बक्से की आवश्यकता नहीं है।

यदि आपके कॉलम स्केल का आकार (किसी प्रकार की उत्तरदायी डिज़ाइन की तरह) तो आपको कुछ ऐसी चीज चाहिए जो इन पूर्ण पदों को गतिशील रूप से सेट करेगी। तो आपको जावास्क्रिप्ट चाहिए।

इसके लिए आप jquery चिनाई या jquery आइसोटोप का उपयोग कर सकते हैं।

http://masonry.desandro.com/

http://isotope.metafizzy.co/

:)