相关疑难解决方法(0)

AngularJS Masonry用于动态改变高度

点击时我有扩展和收缩的div.Masonry库非常适合初始化页面.我遇到的问题是,随着Masonry和下面的指令的绝对定位,当div扩展时,它们与下面的div重叠.我需要让扩展div下面的div向下移动来处理扩展.

我的消息来源是:http: //masonry.desandro.com/

https://github.com/passy/angular-masonry/blob/master/src/angular-masonry.js

/*!
* angular-masonry <%= pkg.version %>
* Pascal Hartig, weluse GmbH, http://weluse.de/
* License: MIT
*/
(function () {
  'use strict';

angular.module('wu.masonry', [])
.controller('MasonryCtrl', function controller($scope, $element, $timeout) {
  var bricks = {};
  var schedule = [];
  var destroyed = false;
  var self = this;
  var timeout = null;

  this.preserveOrder = false;
  this.loadImages = true;

  this.scheduleMasonryOnce = function scheduleMasonryOnce() {
    var args = arguments;
    var found = schedule.filter(function filterFn(item) {
      return item[0] === …
Run Code Online (Sandbox Code Playgroud)

javascript directive angularjs masonry

5
推荐指数
1
解决办法
3647
查看次数

如何用Angular + Masonry修复重叠的砖块?

我正在使用passy的angular-masonry指令在我的应用程序中渲染平铺元素.与许多砌体示例不同,我的砖块不包含图像,只包含通过自定义指令呈现的静态文本和布局内容.我的设置如下:

<div data-masonry
     data-column-width="250"
     data-load-images="false"
     data-preserve-order
     data-reload-on-show
     data-masonry-options="{ gutter: 15, isFitWidth: true, transitionDuration: 0 }">

     <div class="masonry-brick"
          data-ng-repeat="event in vm.events | orderBy: 'startTime.toDate()' | filter: (vm.showOnlyRegistered && { going: true })">

          <div data-event-item="event"></div>

     </div>
</div>
Run Code Online (Sandbox Code Playgroud)

data-event-item 是我的指令,呈现如下:

<div class="panel panel-default panel-thin light-shadow bgcolor-override event-item-card">
<div class="panel-body" data-ng-class="{'bg-success': event.going}">
    <div>
        <p class="text-medium text-thin">{{event.name}}</p>
    </div>

    <p>
        <strong>{{event.computed.locationName}}</strong><br />
        <span data-ng-if="!event.virtual">{{event.city}}, {{event.state}} {{event.zipCode}}</span>
    </p>
    <span class="center-block">
        <span data-discover-pill data-type="default">
            <span class="text-thin">{{event.computed.registrationLabel}}</span>
        </span>
    </span>

    <button type="button" 
            class="btn push-to-bottom bottom-center"
            data-ng-class="{'btn-default': !event.going, 'btn-success': …
Run Code Online (Sandbox Code Playgroud)

javascript jquery angularjs

2
推荐指数
1
解决办法
7141
查看次数

标签 统计

angularjs ×2

javascript ×2

directive ×1

jquery ×1

masonry ×1