Question

我正在尝试使用jQuery waterfall来显示数据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列中显示数据。非常感谢你！

Answer 1

首先，不要将脚本放在头部：Where to put javascript links

其次，在瀑布中似乎有一些奇怪的。医生说：

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>

如何使用jquery瀑布插件

1 个答案: