How to use jquery waterfall plugin

Question

I'm trying to work with jQuery waterfall to show data 3 column, but it is not working.

On the head html I added a script which loads

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">

The page also has a script function:

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

I want to show data :

<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>

I hope you can help me to show the data in 3 columns with jQuery waterfall. Thank you very much!

Your div container should have the `some-container` class at least, otherwise your script will not run on it, only the standard waterfall. Also, close your script tags: `` — frhd, Mar 05 '14 at 15:06
Just out of curiosity: Did you have any luck with my solution? — frhd, Mar 11 '14 at 14:09

score 0 · Accepted Answer · edited May 23 '17 at 11:52

First of all, don't put the scripts in the head: Where to put javascript links

Second, there seems to be something strange going on in waterfall. The doc says:

colMinWidth: 240px Minimal column width in pixels that’s used as a basis for calculating number of columns. Only pixel values accepted for now. If value is undefined — it firstly tries to parse css min-width, and if it fails will fall down to default 240px.

However, using it defaults colMinWidth to 0. Strange.

But don't give up! You can specify your own default in the constructor:

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

So, the following should work for you. Just make sure all the paths are REALLY correct, and add the scripts in the body or after for waterfall to work. Also, you might want to drop the root reference like you did above, and instead put the files where you can access them:

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

And don't forget the ending script tags...

Solution:

<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>

How to use jquery waterfall plugin

1 Answers1