sapegin/jquery.mosaicflow

Mosaicflow with ng-repeat

Opened this issue · 0 comments

When I use mosaicflow with ng repeat, it does not work well and I don't know what I'm doing wrong.
Below is my code:

 <div class="clearfix mosaicflow" data-min-item-width="230">
    <div>
      <div class="mosaicflow__item" data-ng-repeat="image in images">
        <a href="gallery_detail.html"> <img src="[[ image.image ]]" alt=""></a>
        <p>[[ image.name ]]</p>
      </div>  
    </div>
  </div>

and the code generated by the browser:

<div class="clearfix mosaicflow" data-min-item-width="230" style="visibility: visible;">
  <div style="visibility: hidden; width: 100%;"></div>
    <div class="mosaicflow__column" style="width: 33.3333%;">
      <div id="mosaic-0-itemid-1">
      <!-- ngRepeat: image in images -->
        <div class="mosaicflow__item ng-scope" data-ng-repeat="image in images">
          <a href="gallery_detail.html"> 
            <img src="" alt="" data-pin-nopin="true">
          </a>
          <p class="ng-binding"></p>
        </div>
       <!-- end ngRepeat: image in images -->
        <div class="mosaicflow__item ng-scope" data-ng-repeat="image in images">
          <a href="gallery_detail.html"> 
            <img src="" alt="" data-pin-nopin="true">
         </a>
         <p class="ng-binding"></p>
       </div>
       <!-- end ngRepeat: image in images -->
       <div class="mosaicflow__item ng-scope" data-ng-repeat="image in images">
          <a href="gallery_detail.html"> 
            <img src="" alt="" data-pin-nopin="true">
           </a>
          <p class="ng-binding"></p>
       </div>
       <!-- end ngRepeat: image in images -->
       <div class="mosaicflow__item ng-scope" data-ng-repeat="image in images">
          <a href="gallery_detail.html"> 
            <img src="" alt="" data-pin-nopin="true">
          </a>
          <p class="ng-binding"></p>
       </div>
      <!-- end ngRepeat: image in images -->
    </div>
  </div>
  <div class="mosaicflow__column" style="width: 33.3333%;"></div>
  <div class="mosaicflow__column" style="width: 33.3333%;"></div>
</div>

I do not know why the columns appear at the end of the code.