まずはコード(html)


<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--height2"></div>
  ...
</div>

まずはコード(js)

var $grid = $('.gird')
$grid.isotope({
    itemSelector: '.grid-item',
    masonry: {
      columnWidth: 300
    }
})

で、これに新しい要素を追加してあげる:ダメな例

var elem ='<div class="grid-item"></div>';
    elem += '<div class="grid-item"></div>';
$grid.isotope()
    .append( elem )
    .isotope( 'appended', elem )
    .isotope('layout');

何がダメって

appendしてあげているからソース上にはappendされている。
が、isotope('layout')で本来追加された要素にも
追加した.grid-itemの位置がstyle属性として設定されるはずが、されない。

で、js直す:OKな例

elemはhtmlオブジェクトじゃなくて、jqueryオブジェクトにしてあげる。

var elem ='<div class="grid-item"></div>';
    elem += '<div class="grid-item"></div>';
var $elem = $(elem);
$grid.isotope()
    .append( elem )
    .isotope( 'appended', $elem )
    .isotope('layout');

サイトにはhtmlオブジェクトで良さそうな記述なのにね。
(http://isotope.metafizzy.co/methods.html)

4時間くらいはまったあとで解析しなおしたらやっと判明。

たぶんmasonryでも同じなんだろうな。