我正在尝试使用Jquery Masonry为我的图片库无限滚动。 砌体只适用于路线中的图像。 但是在将新图像对象推送到images
arrays之后, 新图像出现在Dom
但是砌体不起作用。 我见过Ember.js – jQuery-masonry +无限滚动并试过但我的代码仍无法正常工作。
图片库路线:
App.ImggalleryRoute = Ember.Route.extend({ model: function(){ return { images: [ { name: "car", src_path: "0dbf51ac84e23bd64d652f94a8cc7a22.png", img_visible: true }, { name: "block", src_path: "3b7bca99e44b3f07b4051ab70d260173.png", img_visible: true }, ... ] }; } });
imagegallery.hbs模板:
{{#each img in images itemController="galleryimage"}} {{#if img.img_visible}}
{{/if}} {{/each}}
图库清单:
App.ImggalleryView = Ember.View.extend({ templateName: "imggallery", didInsertElement: function(){ this.scheduleMasonry(); $(window).on('scroll', $.proxy(this.didScroll, this)); }, willDestroyElement: function(){ this.destroyMasonry(); $(window).off('scroll', $.proxy(this.didScroll, this)); }, scheduleMasonry: (function(){ Ember.run.scheduleOnce('afterRender', this, this.applyMasonry); }).observes('controller.images.@each'), applyMasonry: function(){ var $galleryContainer = $('#galleryContainer'); // initialize $galleryContainer.imagesLoaded(function() { $galleryContainer.masonry({ itemSelector: '.item', columnWidth: 150 }); }); }, destroyMasonry: function(){ $('#galleryContainer').masonry('destroy'); }, didScroll: function(){ if($(window).scrollTop() + $(window).height() == $(document).height()){ console.log("bottom!"); this.get('controller').send('loadMoreGalleryPics'); } } });
图库控制器:
App.ImggalleryController = Ember.ObjectController.extend({ actions: { loadMoreGalleryPics: function(){ this.get('images').pushObject({ name: 'dice', src_path: 'dba8b11658db1b99dfcd0275712bd3e1.jpg', img_visible: true }); console.log('yes!'); } } });
物品管制员:
App.GalleryimageController = Ember.ObjectController.extend({});
我无法找出问题所在。 请帮忙。
desandro解决了这个问题:
需要了解更多jQuery教程分享砌体不适用于Ember中的无限滚动,都可以关注jQuery技术分享栏目—计算机技术网(www.ctvol.com)!
$galleryContainer.imagesLoaded(function() { // check if masonry is initialized var msnry = $galleryContainer.data('masonry'); if ( msnry ) { msnry.reloadItems(); // disable transition var transitionDuration = msnry.options.transitionDuration; msnry.options.transitionDuration = 0; msnry.layout(); // reset transition msnry.options.transitionDuration = transitionDuration; } else { // init masonry $galleryContainer.masonry({ itemSelector: '.item', columnWidth: 150 }); } });
以上就是jQuery教程分享砌体不适用于Ember中的无限滚动相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。
本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址:https://www.ctvol.com/jquerytutorial/981835.html