メーソンリータイルは大きなギャップを置いて配置されています

Question

私はDOMをほとんどコントロールしていないが、CSS/JSライブラリへのフルアクセスが可能なSaaS製品でメーソンリーを動かそうとしています。

問題は縦置きではなく横置きで問題です（添付の画像を参照）。ここで

JSFiddle：ここhttps://jsfiddle.net/ny2texas/0wncosbr/

OR ...

私は石工を呼び出すために使用していますものです：

jQuery('.boxsitepagebody .blog-post-list').masonry({ 
    // options 
    containerStyle: null, 
    itemSelector: '.sblog-post', 
    columnWidth: '.grid-sizer', 
    percentPosition: true, 
    gutter: 1 
}); 

私は思うCSSスニペットが関連している：

.grid-sizer,.sblog-post 
{ 
width: 20% 
} 

以下、HTMLの基本的な構成です。絶対配置（ "left：40.1862％"）は、上記のcolumnWidthとして宣言された20％のほぼ2倍です。しかし、それはなぜ列をスキップし、他の列ごとにタイトルを配置するのですか？

<ul id="blog_post_list_blog_blog_posts_list_0_1" class="blog-post-list sblog-post-newlist" style="height: 4301.2px;"> 
    <li class="grid-sizer"></li> 
    <li class="sblog-post sblog-post-newstyle row1" style="position: absolute; left: 0%; top: 0px;"></li> 
    <li class="sblog-post sblog-post-newstyle row1" style="position: absolute; left: 40.1826%; top: 0px;"></li> 
    <li class="sblog-post sblog-post-newstyle row1" style="position: absolute; left: 0%; top: 545px;"></li> 
    <li class="sblog-post sblog-post-newstyle row1" style="position: absolute; left: 40.1826%; top: 692px;"></li> 
... 
</ul> 

Answer 1

問題を解決しました。

私は、これを理解するために石工のソースコードに入る必要がありました。私が最初にやらなければならなかったことは、GitHubの完全なソースコードのために縮小されたコードを交換して、各タイルのプロセスと配置をデバッグすることでした。

タイルの幅（パディングとボーダーを含む）は179pxで、列の幅は175px（CSSで設定した856 * 20％）でした。タイルは列よりも大きいので、石積みは列方向を2に設定しました。つまり、各列は2列を占めていました（つまり、ギャップ）。 masonryは各ポストの位置を自動パッドするコントロールを持っているので、CSSで独自のパディングを追加していないと仮定します。私はそのパディング（と境界線）を削除して175 = 175pxとし、タイルを適切に配置しました。

タイリングで水平方向の隙間を配置するには、masonry（）に「ガター」コールを使用します。