从左到右而不是从上到下的Arranage砖石瓦片

Question

我正在为即将开展的项目制作砌体布局，并想知道它们是否是一种从左到右而不是从上到下排列砖砌砖的方法。

我尝试在jsfiddle上重新创建布局，但输出看起来不同，所以我决定换个截图

http://i255.photobucket.com/albums/hh140/testament1234/Masonry_zps8b8519b6.jpg

HTML

<div class="masonry">

    <div class="masonry-columns">
    <h2>1st Masonry</h2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget fringilla ante. Phasellus tincidunt erat eu sodales semper. Donec sed lorem ut dui lobortis feugiat non at metus. Sed volutpat tortor vitae purus cursus, ut vehicula orci hendrerit. In ac metus ut massa fringilla porttitor. Aenean vitae sapien rutrum, rutrum enim varius, elementum magna. Aliquam sollicitudin accumsan dui, ut faucibus tellus pretium fermentum. In fringilla quam lorem, eget congue dolor euismod at. Proin nunc lorem, rutrum eu rutrum ac, tristique convallis turpis. Fusce faucibus erat a mauris consequat, sed cursus velit aliquet. 
    </div>

    <div class="masonry-columns">
    <h2>2nd Masonry</h2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget fringilla ante. Phasellus tincidunt erat eu sodales semper. Donec sed lorem ut dui lobortis feugiat non at metus. Sed volutpat tortor vitae purus cursus, ut vehicula orci hendrerit. In ac metus ut massa fringilla 
    </div>

    <div class="masonry-columns">
    <h2>3rd Masonry</h2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget fringilla ante. Phasellus tincidunt erat eu sodales semper. Donec sed lorem ut dui lobortis feugiat non at metus. Sed volutpat tortor vitae purus cursus, ut vehicula orci hendrerit. In ac metus ut massa fringilla. lorem ut dui lobortis feugiat non at metus. Sed volutpat tortor vitae purus cursus, ut vehicula orci hendrerit. In ac metus ut
    </div>

    <div class="masonry-columns">
    <h2>4th Masonry</h2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget fringilla ante. Phasellus tincidunt erat eu sodales semper. Donec sed lorem ut dui lobortis feugiat non at metus. Sed volutpat tortor vitae purus cursus, ut vehicula orci hendrerit. In ac metus ut massa fringilla. lorem ut dui lobortis feugiat non at metus. Sed volutpat tortor vitae purus cursus, ut vehicula orci hendrerit. In ac metus ut massa fringilla porttitor. Aenean vitae sapien rutrum, rutrum enim varius, elementum magna.
    </div>

</div>

CSS

html, body{height:100%}


.masonry{
    clear: both;
    margin: 0px auto;
    padding: 20px 20px 0px;
    position: relative;
    width: 900px;
    z-index: 9;
    background-color:salmon;
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    -moz-box-sizing:border-box;
    height:100%;
}

.masonry-columns{
    display: inline-block;
    list-style: none outside none;
    margin-bottom: 20px;
    padding: 20px;
    width: 100%;
    -moz-box-sizing:border-box;
    background-color:teal;
    float:left;
    direction:ltr
}