images overlap at initial page loading using isotope and knockout.js

Question

On first load images and blocks overlap but after that it works fine

<div id="container" class="isotope" data-bind="isotope: bills, isotopeOptions: isotopeOptions "> <div class="bill-subcategory-image"><img data-bind="style: { width: '100%'}, attr : { src: categoryimage() } " /></div>

Getting Data from Json and rendering at above divs

$(function (){
function Bill(id, billNo, votes, description, category, categoryimage, name, itemType) {
        var self = this;
        self.id = ko.observable(id);
        self.billNo = ko.observable(billNo);
        self.description = ko.observable(description);
        self.votes = ko.observable(votes);
        self.category = ko.observable(category);
        self.categoryimage = ko.observable(categoryimage);
        self.name = ko.observable(name);
        self.itemType = ko.observable(itemType);
        self.RandomHeight = ko.observable(Math.floor(Math.random() * 200) + 150);
        self.voteFor = function () {
            console.log("voting for: %s", self.billNo());
            forUs.vote(self.id(), 'for').done(function (data, textStatus, jqXHR) {
                console.log("you have voted for %s", self.billNo());
            });
        };
        // values for isTracked and isShared is dynamic
        self.isTracked = ko.observable(true);
        self.isShared = ko.observable(true);
        self.trackClass = ko.computed(function () {
            if (self.isTracked()) {
                return 'active';
            }
            else {
                return 'inactive';
            }
        });
        self.shareClass = ko.computed(function () {
            if (self.isShared()) {
                return 'active';
            }
            else {
                return 'inactive';
            }
        });
        self.voteAgainst = function () {
            console.log("vote against: %s", self.billNo());
            forUs.vote(self.id(), 'against').done(function (data, textStatus, jqXHR) {
                console.log('you have voted against %s', self.billNo());
            });
        };
        self.track = function () {
            var identity = (self.billNo() || self.name());
            forUs.track(self.id()).done(function (data, textStatus, jqXHR) {
                self.isTracked(!self.isTracked());
                console.log('you %s tracking %s', self.isTracked() ? 'are now' : 'stopped', identity);
            });
        };
        self.share = function () {
            var identity = (self.billNo() || self.name());
            forUs.share(self.id()).done(function (data, textStatus, jqXHR) {
                self.isShared(!self.isShared());
                console.log('you %s sharing %s', self.isShared() ? 'are now' : 'stopped', identity);
            });
        };
        self.billUrl = ko.computed(function () {
            return "../Bill/" + self.billNo();
        });
        self.popupUrl = ko.computed(function () {
            return "../" + self.itemType() + "/Popup/" + self.id();
        });
        //console.log(self.categoryimage());

    };`

// getting records from JSON file

`function ViewModel() {
        var self = this;
        self.bills = ko.observableArray();

        var $container = $('#container');

        $container.bill-subcategory-image(function () {
            $container.isotope({
                itemSelector: '.item',
                layoutMode: 'masonry'
            });
        });

        self.isotopeOptions = {
            itemSelector: '.item',
            masonry: {
                columnWidth: 280
            }
        };
        self.count = 0;
        $.getJSON(url + "1", function (json) {
            for (var i = 0; i < json.length; i++) {
                var bill = new Bill(
                json[i].Id,
                json[i].BillNo,
                json[i].Votes,
                json[i].Description,
                json[i].Category,
                json[i].CategoryImage,
                json[i].Name,
                json[i].ItemType
                );
                self.bills.push(bill);
            }
        });
        self.Add = function (newData) {
            var newItems = ko.utils.arrayMap(newData, function (item) {
                return new Bill(item.Id, item.BillNo, item.Votes, item.Description, item.Category, item.CategoryImage, item.Name, item.ItemType);
            });
            self.bills.push.apply(self.bills, newItems);
            self.count = self.count + newItems.length;
            console.log("added " + newItems.length + " items! Total added since start = " + self.count);
        };
    };`

//if page scroll than more isotopes render

    var vm = new ViewModel();
    $(window).paged_scroll({
        handleScroll: function (page, container, doneCallback) {
            $.getJSON(url + page, function (json) {
                //console.log("got data, adding...");
                vm.Add(json);
                //console.log("finished adding!");
                doneCallback();
            });
        },
        triggerFromBottom: '200px',
        targetElement: $('#container'),
        loader: '<div class="loader">Loading next page...</div>',
        monitorTargetChange: false
    });
//knockout binding         

 ko.applyBindings(vm, $('#container')[0]);
});

}

Answer 1

For images, try using imagesloaded.js

 var $container = $('#container');

$container.bill-subcategory-image(function () {
$container.imagesLoaded( function(){            
$container.isotope({
            itemSelector: '.item',
            layoutMode: 'masonry'
        });
 });
    });