Javascript jquery布局帮助

你好，我有以下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>

我正在尝试为jquery实现一个名为Masonary的插件，其想法是我可以将4个li的浮动对象放在一起，但是当我添加Masonary时，我只能浮动3个，这是我的Masonary设置

$（'jobwall ul'）。砌体({

---

基本上，我实现了MASOURAL，因为li最终会显示进一步的内容，这些内容将向下滑动，我需要li继续按顺序浮动。有没有更好的方法来实现这一点，或者让MASOURAL允许4个li排成一行

是4*221px（+边距）页面宽度大于100%？

您可能需要使列表中的最后一个元素也没有右边距。

#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;
        }

          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

        });