How to use jquery waterfall plugin

Question

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>