htrex/freewall-sizing-bug.html Secret

## freewall-sizing-bug.html
<!DOCTYPE html>
<html>
<head>
    <title>Flex layouts demo with freewall</title>
    <meta content="text/html; charset=utf-8" http-equiv="content-type">
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="http://vnjs.net/www/project/freewall/freewall.js"></script>
    <style type="text/css">
        body { margin: 0; padding: 0; }
        article { float: left; }
        img { display: block; width: 100%; height: auto; }
    </style>
    <script type="text/javascript">

        // To see the bug try to resize the browser viewport (easy with Firefox CTRL+SHIFT+M)

        // with gutter = 20
        // between 1025px and 1060px freewall suddenly shows 3 columns instead of 6
        // below 171px it shows 1 column instead of 2
        //
        // with gutter = 50 and cellH = 'auto'
        // between 769px and 950px freewall has strange behaviours showing 2 big sized columns and a strange little one
        //
        // with gutter = 0
        // ALL OK, NO BUG


        $(document).ready(function () {

            //var gutter = 0;
            var gutter = 20;
            var gutter = 50;

            var container = $('#freewall');

            function cellSize() {

                var documentWrap = container.width();

                if (documentWrap > 1024) {
                    var colNum = 6;
                } else if (documentWrap > 768) {
                    var colNum = 4;
                } else {
                    var colNum = 2;
                }

                var colFixed = Math.floor(documentWrap / colNum) - gutter;

                // I'm not sure if cellW should be specified with or without gutter, in any case the following line fails too
                //var colFixed = Math.floor(documentWrap / colNum);

                console.log(colFixed + ' * ' + colNum + ' = ' + colFixed * colNum + ' <= ' + documentWrap);
                return colFixed;
            }


            var wall = new freewall("#freewall");
            wall.reset({
                selector: 'article',
                cellW: cellSize,
                cellH: 'auto', // try to experiment also with cellSize (function) to get different weird behaviours
                gutterX: gutter,
                gutterY: gutter,
                animate: true,
                onResize: function () {
                    wall.fitWidth();
                }
            });
            wall.fitWidth();
            // for scroll bar appear;
            $(window).trigger("resize");

        });
    </script>
</head>
<body>
<div id="freewall">
    <article>
        <div class="block">
            <div class="entry-content">
                <img src="http://lorempixel.com/250/250/animals/" width="250" height="250"/>
            </div>
        </div>
    </article>
    <article>
        <div class="block">
            <div class="entry-content">
                <img src="http://lorempixel.com/250/250/animals/" width="250" height="250"/>
            </div>
        </div>
    </article>
    <article>
        <div class="block">
            <div class="entry-content">
                <img src="http://lorempixel.com/250/250/animals/" width="250" height="250"/>
            </div>
        </div>
    </article>
    <article>
        <div class="block">
            <div class="entry-content">
                <img src="http://lorempixel.com/250/250/animals/" width="250" height="250"/>
            </div>
        </div>
    </article>
    <article>
        <div class="block">
            <div class="entry-content">
                <img src="http://lorempixel.com/250/250/animals/" width="250" height="250"/>
            </div>
        </div>
    </article>
    <article>
        <div class="block">
            <div class="entry-content">
                <img src="http://lorempixel.com/250/250/animals/" width="250" height="250"/>
            </div>
        </div>
    </article>
</div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Flex layouts demo with freewall</title>
	<meta content="text/html; charset=utf-8" http-equiv="content-type">
	<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
	<script type="text/javascript" src="http://vnjs.net/www/project/freewall/freewall.js"></script>
	<style type="text/css">
	body { margin: 0; padding: 0; }
	article { float: left; }
	img { display: block; width: 100%; height: auto; }
	</style>
	<script type="text/javascript">

	// To see the bug try to resize the browser viewport (easy with Firefox CTRL+SHIFT+M)

	// with gutter = 20
	// between 1025px and 1060px freewall suddenly shows 3 columns instead of 6
	// below 171px it shows 1 column instead of 2
	//
	// with gutter = 50 and cellH = 'auto'
	// between 769px and 950px freewall has strange behaviours showing 2 big sized columns and a strange little one
	//
	// with gutter = 0
	// ALL OK, NO BUG


	$(document).ready(function () {

	//var gutter = 0;
	var gutter = 20;
	var gutter = 50;

	var container = $('#freewall');

	function cellSize() {

	var documentWrap = container.width();

	if (documentWrap > 1024) {
	var colNum = 6;
	} else if (documentWrap > 768) {
	var colNum = 4;
	} else {
	var colNum = 2;
	}

	var colFixed = Math.floor(documentWrap / colNum) - gutter;

	// I'm not sure if cellW should be specified with or without gutter, in any case the following line fails too
	//var colFixed = Math.floor(documentWrap / colNum);

	console.log(colFixed + ' * ' + colNum + ' = ' + colFixed * colNum + ' <= ' + documentWrap);
	return colFixed;
	}


	var wall = new freewall("#freewall");
	wall.reset({
	selector: 'article',
	cellW: cellSize,
	cellH: 'auto', // try to experiment also with cellSize (function) to get different weird behaviours
	gutterX: gutter,
	gutterY: gutter,
	animate: true,
	onResize: function () {
	wall.fitWidth();
	}
	});
	wall.fitWidth();
	// for scroll bar appear;
	$(window).trigger("resize");

	});
	</script>
	</head>
	<body>
	<div id="freewall">
	<article>
	<div class="block">
	<div class="entry-content">
	<img src="http://lorempixel.com/250/250/animals/" width="250" height="250"/>
	</div>
	</div>
	</article>
	<article>
	<div class="block">
	<div class="entry-content">
	<img src="http://lorempixel.com/250/250/animals/" width="250" height="250"/>
	</div>
	</div>
	</article>
	<article>
	<div class="block">
	<div class="entry-content">
	<img src="http://lorempixel.com/250/250/animals/" width="250" height="250"/>
	</div>
	</div>
	</article>
	<article>
	<div class="block">
	<div class="entry-content">
	<img src="http://lorempixel.com/250/250/animals/" width="250" height="250"/>
	</div>
	</div>
	</article>
	<article>
	<div class="block">
	<div class="entry-content">
	<img src="http://lorempixel.com/250/250/animals/" width="250" height="250"/>
	</div>
	</div>
	</article>
	<article>
	<div class="block">
	<div class="entry-content">
	<img src="http://lorempixel.com/250/250/animals/" width="250" height="250"/>
	</div>
	</div>
	</article>
	</div>
	</body>
	</html>