繁体   English   中英

带有嵌套ul的ul上的jquery石工

[英]jquery masonry on ul with nested ul

我正在尝试创建彼此嵌套级别的站点地图的页脚导航。 我想使用砖石结构,因此填充和边距是一致的,不会根据嵌套项目而更改。 它的射击砌体,但如果我更改砌体调用以仅选择first()ul,然后将嵌套li出现在一行上,则会向嵌套ul添加相对样式。

有任何想法吗?

 <div id="links">
            <ul >
                <li class="box"><a href="/Industries.aspx"  >Industries</a></li>
                <li class="box"><a href="/Services.aspx"  >Services</a></li>
                <li class="box"><a href="/Quality---Regulatory.aspx"  >Quality &amp; Regulatory</a></li>
                <li class="box"><a href="/About.aspx"  >About</a>
                    <ul >
                        <li class="box"><a href="/About/Our-Story.aspx"  >Our Story</a></li>
                        <li class="box"><a href="/About/Our-Mission.aspx"  >Our Mission</a></li>
                        <li class="box"><a href="/About/Our-Core-Values.aspx"  >Our Core Values</a></li>
                   </ul>
              </li>
              <li class="box"><a href="/News.aspx"  >News</a>
                   <ul >
                       <li class="box"><a href="/News/Events.aspx"  >Events</a></li>               
                   </ul>
              </li>
              <li class="box"><a href="/Careers.aspx"  >Careers</a></li>
              <li class="box"><a href="/Contact.aspx"  >Contact</a></li>
              <li class="box"><a href="/tests.aspx"  >tests</a></li></ul>
       </div>

 <script type="text/javascript">

    $('#links ul').masonry({

        singleMode: true,

        // Disables measuring the width of each floated element.
        // Set to true if floated elements have the same width.
        // default: false

        columnWidth: 182,

        // Width in pixels of 1 column of your grid.
        // default: outer width of the first floated element.

        itemSelector: '.box:visible',

        // Additional selector to specify which elements inside
        // the wrapping element will be rearranged.
        // Required for Infinite Scroll with window resizing.

        resizeable: true,

        // Binds a Masonry call to window resizes 
        // so layout appears fluid.
        // default: true

        animate: false,

        // Animates layout rearrangements.
        // default: false

        saveOptions: true

        // Masonry will use the options from previous Masonry
        // calls by default, so you only have to enter in options once
        // default: true
    });
</script>

我知道这已经很老了,但是这个砌体选项可能会帮助您。

containerStyle: { position: 'absolute' }

使用jQuery石工与绝对位置父级?

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM