Adding Elements

[landman]

Hey (-:

I love Mosaicflow but there is one Problem. When i add (container.mosaicflow('add', elm);) new Items they will be show only in the left column. What can i Do?

[sapegin]

It must be a bug, because add should insert new element in the shortest column. Are you using latest version of the plugin?

[robinchow]

Hi landman

I had the same problem when I initialised the plugin as follows:

HTML snippet:

<div class="clearfix" id="images">
  <div class="single-image" id="dummy-image"></div>
</div>

JS snippet:

$(document).ready(function() {
    var imagesMosaicFlow = $('#images').mosaicflow({
        itemSelector: '.single-image',
        itemHeightCalculation: 'attribute'
    });

    // code to create elements with class "single-image"
    imagesMosaicFlow.mosaicflow('add', elem);
});

However, if I used an empty HTML div, like so:

<div class="clearfix" id="images">
</div>

Everything worked fine. Dunno about your use case, but maybe try that?

[pherrymason]

@robinchow, in your JS snippet you're using itemHeightCalculation with attribute value, this is only useful if your items are img tags with a height attribute set. As I don't see any img tag you should use itemHeightCalculation:auto, or simply don't define it as it gets auto by default.

[david-wilson]

I'm having the same issue as landman. I'm using the jQuery Infinite Scroll plugin, and adding the newly loaded photos using a custom callback:

$(document).ready(function(){
        var container = $('#thumbnails').mosaicflow({
          itemSelector: '.photo'
        });
        $('.pagination').infinitescroll({
          nextSelector: "span.navigation a:last",
          navSelector: "span.navigation",
          itemSelector: ".photo",
          appendCallback: false
        },function (newItems) {
          $.each(newItems, function(index, value) {
              console.log("item callback: " + value);
              container.mosaicflow('add', $(value));
          });
        });
    });

Everything works as expected, except for the fact that items are only added to the left most column.

[alana314]

I'm having the exact same problem as @david-wilson with Infinite Scroll. Should the new items have the itemSelector class (.photo in david-wilson's example)? If I add it then they all appear in one column, if I don't then they appear in multiple columns but the layout is all off.

[alana314]

As a temporary fix I am skipping add and manually adding to each column:

var i = 0;
$.each(dat.data, function(idx, itm){
    //mosaicflow('add', $(itm.item));
    $('.mosaicflow__column').eq(i).append(itm.item);
    i++;
    if(i == $('.mosaicflow__column').length)
        i = 0;
});

[iamstarkov]

Seems to be fixed

[iamstarkov]

I was wrong. Currently working on patch

[iamstarkov]

I found problem. Adding is synchronous and problem is in other place — in calculation height of added element

[iamstarkov]

The problem was in images which have no height at the adding moment, that's why lowest column haven't been changed and all blocks added to it.

I will deliver patch in few hours

[sapegin]

@matmuchrapna Great 👍

[brucomela]

Hi, if I add an image the mosaicflow doesn't works. Only the first "insertion" works.
Check my test page:
http://www.dapuppo.it/test.php

span "don't works" adds:

<div class="mosaicflow__item"  >
    <img src="images/ima.jpg" height="200" />
</div>

span "works" adds:

<div class="mosaicflow__item" >
    <p>text...</p>
</div>

if i add an image, the script adds the first box in the right place, but after the first, all the boxes are put in the last column.
Without the image, all works well.

[iamstarkov]

Thank you for report, I will take a look at your case today