1

私はpackeryライブラリを使用しています。

問題は、メソッドの 2 番目のパラメーターに関するfitものです。ドキュメントには要素であるべきだと書かれていますが、「要素」が何を意味するのかわかりません。

次のリンクは、私の問題の例です。

リンク

サイズ変更ボタンをクリックすると、fit動作していないようです。機能している場合、「post 1」のサイズを変更すると、「post 2」は重複するのではなく 2 行目に移動するはずです。

次のリンクは私の言いたいことの例ですが、代わりにボタンでトリガーしたいと思います。

リンク

4

1 に答える 1

2

http://jsfiddle.net/9Q5sZ/3/このフィドルをチェック

if (isLarge) {
        $("div#container").packery('fit', div[0]);
    }

ターゲット要素を提供するには、div[0] を使用します。

変数「div」は Jquery 出力オブジェクトで、実行時にオブジェクト配列になります

div: jQuery.fn.init[1]
0: div.post.large
context: button.resize
length: 1
prevObject: jQuery.fn.init[1]
__proto__: Object[0]

context、proto、length などの追加パラメータを確認できますが、Packery プラグインは正確な div オブジェクトのみを必要としていました (このオブジェクトは packery ドキュメントの要素によって意味されます)。したがって、div[0] は正確な div オブジェクトを提供します。

div[0]: div.post
accessKey: ""
align: ""
attributes: NamedNodeMap
baseURI: "http://fiddle.jshell.net/9Q5sZ/3/show/"
childElementCount: 2
childNodes: NodeList[5]
children: HTMLCollection[2]
classList: DOMTokenList[1]
className: "post"
clientHeight: 100
clientLeft: 3
clientTop: 3
clientWidth: 211
contentEditable: "inherit"
dataset: DOMStringMap
dir: ""
draggable: false
firstChild: text
firstElementChild: button.resize
hidden: false
id: ""
innerHTML: "↵        <button class="resize">resize</button>↵        <div>post 1</div>↵    "
innerText: "resize↵post 1↵"
isContentEditable: false
lang: ""
lastChild: text
lastElementChild: div
localName: "div"
namespaceURI: "http://www.w3.org/1999/xhtml"
nextElementSibling: div.post
nextSibling: text
nodeName: "DIV"
nodeType: 1
nodeValue: null
offsetHeight: 106
offsetLeft: 0
offsetParent: div#container
offsetTop: 0
offsetWidth: 217
onabort: null
onbeforecopy: null
onbeforecut: null
onbeforepaste: null
onblur: null
oncancel: null
oncanplay: null
oncanplaythrough: null
onchange: null
onclick: null
onclose: null
oncontextmenu: null
oncopy: null
oncuechange: null
oncut: null
ondblclick: null
ondrag: null
ondragend: null
ondragenter: null
ondragleave: null
ondragover: null
ondragstart: null
ondrop: null
ondurationchange: null
onemptied: null
onended: null
onerror: null
onfocus: null
oninput: null
oninvalid: null

//Object continues
于 2014-06-02T09:37:58.343 に答える