0

jQuery ウォーターフォールを使用してデータ 3 列を表示しようとしていますが、機能していません。

ヘッドhtmlに、ロードするスクリプトを追加しました

https://github.com/dfcreative/jquery.waterfall

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js?ver=1.3.2" type="text/javascript">
     <script src="/themes/classic/js/zepto.js" type="text/javascript">
     <script src="/themes/classic/js/jquery.waterfall.js" type="text/javascript">

このページにはスクリプト機能もあります。

    <script type="text/javascript">
    $(function(){
        $('.some-container').waterfall({        
            autoresize: true
        })
    })
</script>

データを表示したい：

<div class="waterfall">

  <div>hello data 1</div>
  <div>
    hello data 2
    hello data 2
  </div>
  <div>
    hello data 3
 hello data 3
 hello data 3
  </div>

 <div>
    hello data 4
    hello data 4
    hello data 4
    hello data 4
  </div>
  <div>
    hello data 5
    hello data 5
    hello data 5
    hello data 5
    hello data 5
  </div>
</div>

jQuery ウォーターフォールでデータを 3 列に表示する方法を教えてください。どうもありがとうございました！

4

1 に答える 1

0

まず第一に、頭の中にスクリプトを入れないでください: JavaScript リンクを配置する場所

第二に、滝で何か奇妙なことが起こっているようです。ドキュメントは次のように述べています。

colMinWidth: 240px 列数を計算するための基礎として使用されるピクセル単位の最小列幅。現在のところ、ピクセル値のみが受け入れられます。値が定義されていない場合 — 最初に css min-width を解析しようとし、失敗するとデフォルトの 240px に落ちます。

ただし、これを使用すると、デフォルトcolMinWidthで 0になります。変。

しかし、あきらめないでください！コンストラクターで独自のデフォルトを指定できます。

$('.some-container').waterfall({
  colMinWidth: 150,
  autoresize: true
});

したがって、以下はあなたのために働くはずです。すべてのパスが本当に正しいことを確認し、ウォーターフォールが機能するように本文または後にスクリプトを追加してください。また、上記のようにルート参照を削除し、代わりにアクセスできる場所にファイルを配置することもできます。

<script src="/themes/classic/js/zepto.js" type="text/javascript">
            ^^^

そして、スクリプトの終了タグを忘れないでください...

解決策:

<html>

<head>
<title> waterfall test </title>
</head>

<body>

<div class="some-container">

  <div>hello data 1</div>
  <div>
    hello data 2
    hello data 2
  </div>
  <div>
    hello data 3
    hello data 3
    hello data 3
  </div>

 <div>
    hello data 4
    hello data 4
    hello data 4
    hello data 4
  </div>
  <div>
    hello data 5
    hello data 5
    hello data 5
    hello data 5
    hello data 5
  </div>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="themes/classic/js/zepto.js" type="text/javascript"></script>
<script src="themes/classic/js/jquery.waterfall.js" type="text/javascript"></script>

<script>
  $(document).ready(function(){
      $('.some-container').waterfall({
        colMinWidth: 150,
        autoresize: true
      });
  })
</script>

</body>

</html>
于 2014-03-05T15:37:44.510 に答える