javascript - jquery 帮助布局

标签 javascript jquery css layout jquery-masonry

您好,我有以下 HTML,

    <article id="jobwall">
    <ul>
        <li class="box">Hello World</li>
        <li class="box">Hello World</li>
        <li class="box">Hello World</li>
        <li class="box noRMar">Hello World</li>
        <li class="box">Hello World</li>
        <li class="box">Hello World</li>
        <li class="box">Hello World</li>
    </ul>
</article>

和下面的 CSS,

#jobwall { 
        width:100%;
        float:left;
        clear:both;
        overflow:hidden;
        margin:15px 0px 0px 0px;
    }   

    #jobwall li {
        width:221px;
        float:left;
        margin:0px 17px 20px 0px;
        border:1px solid red;

    }

        #jobwall li.noRMar {
            margin:0px 0px 20px 0px;
        }

我正在尝试为 jquery 实现一个名为 Masonary 的插件,想法是我可以让 4 个 li 彼此相邻 float ,但是当我添加 masonary 时我只能 float 3 个,这是我的砌体设置,

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

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

          columnWidth: 241,
          // 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: true,
          // 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

        });

基本上,我将 masonary 实现为 li,最终显示将向下滑动的更多内容,我需要 li 继续按它们的顺序 float 。有没有更好的方法来实现这个,或者让 masonary 允许 4 li 排成一排

最佳答案

页面上的 4 * 221px(+边距)是否大于 100% 宽度?

关于javascript - jquery 帮助布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5620947/

相关文章:

css - 特殊页面背景 - 静态、平铺

javascript - 无法使用 .show() 显示隐藏图像

javascript - shadowdomv1 在 firefox 上的兼容性

javascript - 定位并克隆特定表格单元格,从第二个表格的顶部到底部 append

javascript - jQuery 脚本忽略超链接

javascript - 使用 jQuery 遍历 div

javascript - jQuery - 从 <ul> 获取具有特定类的 <li>

javascript - 普通 JavaScript : Filter nested array by array

javascript - jquery 移动更改页面,带有来自 javascript 的页面转换

javascript - 我的所有浏览器都没有发送原始 header