标签: packery
打包 - 如何更改布局模式？
我想使用这个插件:http://packery.metafizzy.co/,布局模式:如首页所述,一丝不苟.我浏览了每一页文档,无法找到如何将其设置为细致而不是默认的砌体布局!
var $container = $('#grid_index');
// initialize
$container.packery({
itemSelector: '.item',
gutter: 0
});
有任何想法吗？
推荐指数
解决办法
查看次数
Packery附加方法添加三个项目.如何添加一个项目？
我试图通过方法添加动态包装项目click.所有的一切都工作正常,除了单击包装添加三个新项目.我的问题是如何在单击时添加一个项目？
谢谢.
编辑
页面加载后网格项为五.见下图.
当click该追加项目 button packery将增加更多的3项.见下图.
片段
var $grid = $('.grid').packery({
itemSelector: '.grid-item'
});
$('.append-button').on( 'click', function() {
// create new item elements
var $items = getItemElement().add( getItemElement() ).add( getItemElement() );
// append elements to container
$grid.append( $items )
// add and lay out newly appended elements
.packery( 'appended', $items );
});
// make <div class="grid-item grid-item--width# grid-item--height#" />
function getItemElement() { …推荐指数
解决办法
查看次数
角度,嵌套重复破坏指令(packery + dragabilly)
我在使用有角度的dragabilly时遇到了一个小问题,问题很奇怪,因为它一直有效,直到我对如何加载使用packery的内容进行了一些更改,特别是添加了嵌套重复的级别.当我这样做时,packery仍然正确运行,但它似乎只能在第一个对象上运行.
HTML看起来像 -
<div class="item gs-w" ng-class="widget.size" ng-repeat="widget in contentHere" packery-angular >
<!-- nested repeat -->
<div ng-repeat="side in widget.sides" ng-show="side.active">
所以它只是一个嵌套的重复,其中packery运行外部项目,并且再次,packery元素工作正常.当我在嵌套重复中添加它时,它会破坏 - 这些对象有多个面,我隐藏在那边.你看到那里的内容,但是拖动句柄在嵌套重复内部,我认为这可能是问题,或者嵌套是加载时间稍长,并且无法及时识别手柄？我不太确定,这就是我可以使用某个方向的地方.
这是指令 - http://jsfiddle.net/yq4zwLzs/.我添加的唯一内容是移动UA检查尝试在移动设备上关闭可拖动性,因为在那时它是不必要的.我试过把它取下来它似乎没有任何影响.
这是它的一个实际的吸收者 -
http://plnkr.co/edit/HSVztH3vlf5VI1lf1tFR?p=preview
原谅丑陋 - 但如果你看,你可以移动顶部项目,但不是底部项目.这就是我被困住的地方,我似乎无法弄清楚这是怎么发生的.您可以通过.handle(标题元素)拖动项目.我会感激任何帮助,因为我似乎被困在这里.
谢谢阅读!
更新
即使我把.handle放在内部重复之外,它仍然有同样的问题.也许它与内部重复和角度包装运行的顺序有关？
更新2
看起来拖动句柄逻辑根本不起作用,你可以拖动任何东西,而不仅仅是.handle
更新3
我几乎可以肯定这与嵌套的ng-repeat有关(也许它与指令在对象上运行的方式相互作用),因为无论我尝试什么,只要我有嵌套重复,我都有相同的问题.如果我把它拉下来就会恢复正常工作,但如果没有它我很难实现我想要的目标:(.
另外 - 如果我转
var draggable2 = new Draggabilly(element[0], {handle: '.handle'} );
成
var draggable2 = new Draggabilly(element[0] );
它工作正常.我需要一个拖动手柄,因为这些div中的内容将与用户进行交互,我不希望div在它们内部点击时四处移动.也许如果有一种方法可以稍后启动dragabilly？
推荐指数
解决办法
查看次数
确定包含项目的对齐顺序
这是我的代码:http://codepen.io/helloworld/pen/JoKmQr
让我们假设我从服务器获得了一组数据.数据有标题和订单号.
我有5个数组项,orderNumber从1到5.
现在我想布局5个div,其中每个div位于包装布局系统中的某个位置.
看这个图片:
颜色并不重要.重要的是div的顺序根据他们的订单号.
把orderNumber的流动从去顶至下和左到右.
问题:
如何确定布局系统中div的顺序？他们自动布局到我想要的流程？或者手动订购的提示也没关系:-)
HTML
<h1>Packery demo - Draggabilly</h1>
<div class="packery js-packery" data-packery-options='{ "isHorizontal": true }'>
<div class="item w1"></div>
<div class="item h4"></div>
<div class="item w2"></div>
<div class="item w3"></div>
<div class="item h2"></div>
</div>
CSS
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body { font-family: sans-serif; }
.packery {
background: #FDD;
background: hsla(45, 100%, 40%, 0.2);
counter-reset: item;
height: 400px;
}
/* clearfix */ …推荐指数
解决办法
查看次数
加载的砌体/同位素/填充图像+ Web字体
我在网站上使用Packery.js [ http://packery.metafizzy.co/ ]并且在页面加载时遇到一些布局问题.我查看了Mason,Isotope和Packery的文档(所有非常相似的插件,全部由David DeSandro开发),并讨论了在加载所有图像以及任何webfonts之后应该触发布局的问题.
http://packery.metafizzy.co/appendix.html
我的Packery工作得很好,只能使用imagesLoaded ......但我不确定如何将Google Web Font加载器与之配合使用.下面是我加载字体的代码,后面是imagesLoaded Packery Layout.如果任何人都可以建议在Web字体和图像加载之后让Packery解雇,我将永远感激不尽.
// before <body>
<script type="text/javascript">
WebFontConfig = {
google: {
families: [ 'Bitter:400,700,400italic:latin' ]
},
typekit: {
id: // hidden for obvious reasons
}
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>
// after </body>
// jquery and plugins are loaded prior to the …typekit jquery-masonry jquery-isotope webfont-loader packery
推荐指数
解决办法
查看次数
拖动时的填充然后在可排序的网格中垂直放置项目,垂直对齐中断
我在尝试使用packery和draggabilly来创建可排序的项目网格时遇到问题.
我也尝试了jquery ui dragabble,问题仍然存在.当我拖放项目时,可以打破垂直对齐,以便项目"按下"部分沿着行向下.这也打破了物品的顺序.
http://jsfiddle.net/foobass/sasrx654/
如果您水平拖动项目,它会卡入到位并对齐.如果垂直拖动,可能会失去对齐,它不会正确捕捉到位.最后的项目位置也会改变.
任何人都可以建议我可能做错了吗？
var container = document.querySelector('#container');
var packery = new Packery(container, {
rowHeight: '.module-sizer',
itemSelector: '.module',
columnWidth: '.module-sizer',
isInitLayout: true,
isResizeBound: true
});
似乎由于某种原因,被删除项目的"顶部"css值和下面的项目被动态设置为不正确的值.
推荐指数
解决办法
查看次数
让Packery/Masonry使用angular2
我正在尝试让Packery/Masonry在一个组件上工作.Packery正在检测容器,但是它的高度为零表示内容未加载,即使我正在使用imagesLoaded.我已经尝试过使用各种生命周期钩子,但它们都有相同的结果,所以有点丢失我错的地方.
import {BlogService} from './blog.service';
import {Blog} from './blog.model';
import {Component, ElementRef, OnInit, AfterViewInit} from '@angular/core';
import {LinkyPipe} from '../pipes/linky.pipe';
declare var Packery: any;
declare var imagesLoaded: any;
@Component({
moduleId: module.id,
selector: 'blog',
templateUrl: 'blog.component.html',
providers: [BlogService],
pipes: [LinkyPipe]
})
export class BlogComponent implements OnInit, AfterViewInit {
blogs: Blog[];
errorMessage: string;
constructor(private _blogService: BlogService, public element: ElementRef) { }
ngOnInit() {
this.getBlogs();
}
ngAfterViewInit() {
let elem = this.element.nativeElement.querySelector('.social-grid');
let pckry;
imagesLoaded(elem, function(instance) {
console.log('loaded');
pckry = new Packery(elem, { …推荐指数
解决办法
查看次数
在 Angular 2 中使用 Packery
我似乎无法让Packery使用 angular-cli 和 typescript 2.0 使用 Angular 2。我正在使用 Packery 1.4.1 和来自绝对类型的该版本的打字稿定义。
问题是在使用 ng serve 运行项目时找不到对Outlayer的 Packery 引用。
特别是由于以下原因引发了以下异常：
类型错误：无法在 Object.utils.extend 处设置未定义的属性“位置”（在 webpackJsonp.82.module.exports 处评估）
下面是我的项目代码。
来自 angular-cli.json 的脚本部分：
"scripts": [
"../node_modules/packery/dist/packery.pkgd.js"],
我也尝试添加依赖的 js 文件，但抛出的异常是相同的：
"scripts": [
"../node_modules/packery/dist/packery.pkgd.js",
"../node_modules/get-size/get-size.js",
"../node_modules/outlayer/outlayer.js",
"../node_modules/ev-emitter/ev-emitter.js",
"../node_modules/fizzy-ui-utils/utils.js",
"../node_modules/desandro-matches-selector/matches-selector.js"
],
app.component.ts:
import { Component, ViewChild, AfterViewInit } from '@angular/core';
declare var Packery: any;
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit
{
@ViewChild('grid') grid;
private pckry: any;
constructor() {} …推荐指数
解决办法
查看次数
如何保存排序顺序？
我已经使用packery和draggabilly 创建了Demo,我有五个网格.我可以使用draggable对它们进行排序.我进行排序.我需要保存排序的网格.当我在dev中检查时,网格没有移动位置正在改变而不是网格.
因为我已经通过了ID,但没有用.由于上面提到的问题.
有没有办法保存排序顺序？我不想用localStorage
我的代码如下
HTML
<h1>Image sort</h1>
<div class="packery">
<div class="item w2 h2 i1" tabindex="0">A</div>
<div class="item w2 h2 i2" tabindex="1">B</div>
<div class="item w2 h2 i3" tabindex="2">C</div>
<div class="item w2 h2 i4" tabindex="3">D</div>
<div class="item w2 h2 i5" tabindex="4">E</div>
</div>
JS
// http://packery.metafizzy.co/packery.pkgd.js and
// http://draggabilly.desandro.com/draggabilly.pkgd.js added as external resource
// ----- text helper ----- //
$(function() {
var $container = $('.packery').packery({
columnWidth: 100,
rowHeight: 180,
// disable initial layout
isInitLayout: false
});
var pckry = …推荐指数
解决办法
查看次数
具有CSS的Pinterest样式布局，但水平堆叠而不是垂直堆叠
我正在尝试创建一个不使用Packery或任何JS的pinterest样式的布局。我尝试使用CSS3列，但它们垂直堆叠。
在这里查看小提琴， https://jsfiddle.net/2otpzbgt/1/
column-count: 3;
是我使用过的，卡片显示为1、6、11等。是否可以显示为1、2、3？
我要解决的目的是使用具有动态内容的网格布局，其中图像大小（高度）会变化（类似于pinterest），但是只有在事先知道图像高度的情况下，包装工才能进行布置。当您滚动时，我懒于加载图像并获取卡。
谢谢！
推荐指数
解决办法
查看次数
标签 统计
packery ×10
javascript ×6
jquery ×4
angular ×2
draggable ×2
masonry ×2
angular-cli ×1
angularjs ×1
css ×1
css3 ×1
imagesloaded ×1
sorting ×1
typekit ×1
webpack ×1