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 以像素为单位的最小列宽，用作计算列数的基础。目前只接受像素值。如果 value 未定义——它首先尝试解析 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 回答