<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

​

<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.0/masonry.pkgd.js"></script>

​

 <script src="http://benahm.github.io/jquery.throwable/javascripts/jquery.throwable.js" type="text/javascript"></script> 

​

<style>

  body{

  background:grey;

  overflow: hidden;

}

​

#container{

  width:70%;

  height:90%;

  border:8px solid red;

  padding:30px;

  margin-left: auto;

  margin-right: auto;  

  background:white;

}

​

​

.grid{

  border:4px solid blue;

  padding:30px;

}

.grid-item{

​

​

  height:200px;

 width:200px;

background: linear-gradient(to bottom,  #87e0fd 0%,#05abe0 100%);

  border:3px dashed blue;

}

</style>

​

​

  <div id="container">   

<div class="grid">          

        <div class="grid-item"></div>

        <div class="grid-item"></div>

        <div class="grid-item"></div>

        <div class="grid-item"></div>

        <div class="grid-item"></div>

        <div class="grid-item"></div>

        <div class="grid-item"></div>

        <div class="grid-item"></div>   

​

    </div>

     </div>

​

<script>

  $('.grid').masonry({

  // options

  itemSelector: '.grid-item',

  columnWidth: 20,

  isResizeBound: false,

    isOriginTop: false

});

  </script>

​

​

​

​

​

    <script>

    $(document).ready(function() {

        setTimeout(function() {

              $(".grid-item").throwable({      

                  containment:parent,

                        drag:true,

                        gravity:{x:0,y:1},

                        shape:"circle",

                        autostart:false,

                        bounce:0,

                        damping:10,

                        collisionDetection: true}); 

        }, 1000);

    });

                      </script>

​

​