4

私はjquery masonryを使用していますが、画像/投稿を適切にスタックするのに問題があります(添付画像を参照)。

問題は、投稿/画像間の余白/ギャップが多すぎることです。

どうすればこれを修正できますか?

ありがとう、

ファイサル

INDEX.HTML.ERB

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="/assets/jquery.js"></script>
<script src="/assets/jquery.masonry.min.js"></script>
<style>
  .item {
   width: 200px;
   margin: 8px;
   float: left;
   border: 1px solid #999999; 
   background-color: #F7F7F7; 
   -moz-border-radius: 10px; 
   -webkit-border-radius: 10px; 
   padding: 6px;
   color: black;
   }

</style>
<div id="container">
<br />
<br />
<br />
<% @posts.each do |post| %>
<div class="item">
<%= post.body %>
<br />
<%= post.title %> 
<br />
<i>RSVP -- <%= post.job %>.</i>
<br />
<i>Created <%= time_ago_in_words(post.created_at) %> ago.</i>
</div>
<script type="text/javascript">

$(window).load() { 
$('#container').masonry({
  itemSelector: '.box',
  columnWidth: function( containerWidth ) {
  return containerWidth / 5;
  });
});
</script>
<% end %>
</div>

ここに画像の説明を入力

4

3 に答える 3

4

JSfiddle もいいでしょう。

$(window).load(function() {

エガシムスが指摘したように...

$(document).ready(function()

動作しませんが、(function() ビットは私が最初に試すものです。gutterWidth同様に「いじる」こともできます (石工)。

アップデート：

私はあなたが作った jsfiddle をフォークし、コードの一部 (多くの冗長な JavaScript など) をクリーンアップし、動作するようにしました。私は石工などで提案を使用しましたが、意味があるはずです。動作バージョンのフィドルをチェックしてください: http://jsfiddle.net/8KHAh/11/

$(function(){
  $('#container').masonry({
    // options
    itemSelector : '.item',
    columnWidth : 226
  });
});

同様の CSS を使用するか、columnWidthを調整してパディングなどを調整してください。

于 2012-05-10T20:33:16.377 に答える
1

jQuery Masonryを初めて見たところ、これがどのように見えるかから、プラグインがまったく実行されていない可能性がありますか？これは通常、コードに構文エラーがある場合に発生します。あなたのJSは少し大ざっぱに見えます、そして、うーん...お奨め！これを使って：

$(function() {
  $('#container').masonry({
    itemSelector: '.box',
    columnWidth: function( containerWidth ) {
      return containerWidth / 5;
    }
  });
});

それはうまくいく必要があります。

適切なインデントが重要である理由はここにあります。インデントがあれば、問題（および解決策）はすぐにわかります。最初に、あなたは呼んでいました：

$(window).load() { /* your code goes here */ }

これらは2つの完全に別個のステートメントであり、実質的に次と同じです。

$(window).load(); /* your code goes here */

次のように、パラメータとして無名関数をに渡す必要があります.load()。

$(window).load ( function() { /* your code goes here */ } )

また、関数を定義した後、設定オブジェクトにセミコロンがありましたcolumnWidth-入力した場合と同じです

{
   name1: 'value1',
   name2: 'value2'; // <-- SYNTAX ERROR
   name3: 'value3', // it's okay to leave a trailing comma, though
}

それはいつも私にもわかりますが、適切なインデントを使用するとはるかに見やすくなります。

結論：自分自身に良いインデントを教えてください。また、ブラウザのJSコンソールを使用して、構文エラーをチェックします。それだけでも、何が悪いのかを理解するのに非常に役立ちます。

于 2012-05-10T20:08:55.627 に答える
-1

私は石積みに精通していませんが、8pxのマージンと6pxのパディングがあることを示しています。私はそれら、多分2つか3つのピクセルを減らすことを試みることから始めます。それでも何も得られなかった場合は、そのクラスに境界線を追加して、それが何に影響を与えているかを正確に調べます。

于 2012-05-10T20:00:06.723 に答える