图像在初始页面加载利用同位素和knockout.js

Question

在第一负载图像重叠和块重叠但之后，它工作正常

<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>

从Json的获取数据和渲染在以上的div

$(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

对于图片，请尝试使用imagesloaded.js

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

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