同位素用户状态javascript

我已经建立了这个同位素模块 – 但是我想要增强它 – 所以它会快速到底，并且可以从json请求获取更新。 此外，如果发生更改（如在线用户查看配置文件），则在用户页面上更改个人参考。

http://jsfiddle.net/CXqM2/26/

这是当前的代码

var $container = $( '#isotope' ), // @see {@link http://fgnass.github.io/spin.js} spinJsConfiguration = { lines: 5, // The number of lines to draw length: 3, // The length of each line width: 2, // The line thickness radius: 6, // The radius of the inner circle color: '#666' // #rgb or #rrggbb or array of colors }; // initialize isotope // prevent "First item breaks Masonry layout" issue // @see {@link http://isotope.metafizzy.co/docs/help.html#first_item_breaks_masonry_layout} $container.isotope({ masonry: { columnWidth: 30 } }); // handle click events $container.on( 'click', '.user', function( event ) { var $this = $( this ); event.preventDefault(); // if not already open, do so if ( !$this.hasClass( 'open' ) ){ var $openItem = $container.find( '.open' ); // if any, close currently open items if ( $openItem.length ) { closeItem( $openItem ); } openItem( $this ); } }); $container.on( 'click', '.close', function( event ) { event.stopPropagation(); closeItem( $( this ).closest( '.user' ) ); }); function openItem( $item ) { var $image = $item.find( '.user-image' ); $item.addClass( 'loading' ).spin( spinJsConfiguration ); // @todo we should only replace the image once $image.attr( 'src', $image.data( 'src-large' ) ); // at least for the sake of this demo we can use the "imagesLoaded" plugin contained within // Isotope to determine if the large version of the user image has loaded // @todo Isotope v1 contains an outdated version of the "imagesLoaded" plugin - please use the current one // @see {@link https://github.com/desandro/imagesloaded} $item.imagesLoaded( function() { $item.spin( false ).removeClass( 'loading' ).addClass( 'open' ); $container.addClass( 'item-open' ).isotope( 'reLayout' ); $item.append( '
×
' ); }); } function closeItem( $item ) { $item.removeClass( 'open' ).find( '.close' ).remove(); $container.removeClass( 'item-open' ).isotope( 'reLayout' ); } 

---

这个演示http://jsfiddle.net/CXqM2/85/

能够用json数据更新同位素。 我可以使用新的json数据更新重新填充列表。

我基本上希望不再存在的项目淡出 – 删除要添加的新项目 – 添加/插入

• 任何优先级更新 – 用户已向您发送消息以自动打开此用户。 我该如何触发？

这是每10秒重新填充的代码

 getUpdate: function(){ function getRandomInt (min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } var that = this; window.setInterval(function(){ console.log("new data time"); var rand = getRandomInt (0, 1); that.populateIsotope(data[rand].stream); //_re_invoke isotope $container.isotope('reLayout') },10000); } 

Answer 1

最新代码******** http://jsfiddle.net/CXqM2/209/ *******

此示例将依赖后端上的某些开发来提供优先级元素 – 使用通知日期和通知ID来帮助标识流中的优先级元素。 我已经将日期排序添加到同位素代码中。

  getSortData: { date: function ($elem) { var dates = $elem.attr('data-user-notification-date'); dateArray = dates.split('/'), year = dateArray[2].substr(0, 4), month = dateArray[1], day = dateArray[0]; timeArray = dates.split(':'), hours = timeArray[0].slice(-2), minutes = timeArray[1], seconds = timeArray[2]; return new Date(year, month, day, hours, minutes, seconds); } }