如何使用各种大小的盒子同位素jquery插件

Question

嗨，我对同位素插件很新，对一切都非常困惑。 对于我在下图中显示的布局.. 我该怎么做才能得到结果？ 因为我的盒子目前看起来很乱，并且不能像第一到第四盒那样安排得好。 请帮帮我，谢谢。

我的代码： http://codepen.io/rae0724/pen/woBEjj

$('.grid').isotope({
  itemSelector: '.grid-item',
  percentPosition: true,
  masonry: {
    columnWidth: '.grid-sizer'
  }
});