【问题标题】:the second parameter of packery fit method(jQuery)?packery fit 方法(jQuery)的第二个参数?
【发布时间】:2014-06-02 09:04:52
【问题描述】:

我正在使用 packery 库。

问题在于fit方法的第二个参数。文档说它应该是element,但我不知道“元素”是什么意思。

以下链接是我的问题的一个示例。

Link

当我单击调整大小按钮时,fit 似乎不起作用。如果它正常工作,当我调整“post 1”的大小时,“post 2”应该转到第二行而不是重叠。

下面的链接是我的意思的一个例子,但我希望通过按钮来触发。

Link

【问题讨论】:

    标签: jquery packery


    【解决方案1】:

    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]
    

    你可以看到额外的参数,如上下文、proto、长度等。但是你的 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
    

    【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2020-09-18
    • 1970-01-01
    • 2022-11-01
    • 2019-07-08
    • 1970-01-01
    • 1970-01-01
    • 2014-12-13
    相关资源
    最近更新 更多