jQuery Masonry example

HTML

<script src="http://masonry.desandro.com/jquery.masonry.min.js"></script>
<div id="parent">
    <div id="child">aaa aaaaaaaaa aaaaaaaa aaaaaaaaaaaa abbbbbbbbbbbbbbbbb bbbbbbbbbbbbcc ccccccc ccccccccccc cccccccd ddddddd ddd ddddd ddddd dddddddd aaaaaaaaaaaa aaaaaaaa aaaaaaaaaaaa abbbbbbbbbbbbbbbbb bbbbbbbbbbbbcc ccccccc ccccccccccc cccccccd ddddddd ddd ddddd ddddd dddddddd aaaaaaaaaaaa aaaaaaaa aaaaaaaaaaaa abbbbbbbbbbbbbbbbb bbbbbbbbbbbbcc ccccccc ccccccccccc cccccccd ddddddd ddd ddddd ddddd dddddddd aaaaaaaaaaaa aaaaaaaa aaaaaaaaaaaa abbbbbbbbbbbbbbbbb bbbbbbbbbbbbcc ccccccc ccccccccccc cccccccd ddddddd ddd ddddd ddddd dddddddd aaaaaaaaaaaa aaaaaaaa aaaaaaaaaaaa abbbbbbbbbbbbbbbbb bbbbbbbbbbbbcc ccccccc ccccccccccc cccccccd ddddddd ddd ddddd ddddd dddddddd aaaaaaaaaaaa aaaaaaaa aaaaaaaaaaaa abbbbbbbbbbbbbbbbb bbbbbbbbbbbbcc ccccccc ccccccccccc cccccccd ddddddd ddd ddddd ddddd dddddddd aaaaaaaaaaaa aaaaaaaa aaa</div>
</div>

CSS

#parent {
    width: 300px;
    height: 300px;
    background-color: #aaa;
    margin: auto auto;
    overflow: hidden;
}
#child {
    width: 200px;
    height: 800px;
    background-color: #999;
    margin: auto auto;
    text-align: justify;
    position: relative;
    top: 0;
    -webkit-transition: all 0.5s ease-out;
}

JavaScript

$('#parent').bind('mousewheel', function (e) {
    if (!(e.originalEvent.wheelDelta == 120)) {
        var top = parseInt($("#child").css("top"));
        $("#child").css("top", (top - 100) + "px");
        top = parseInt($("#child").css("top"));
        if (top <= -500) {
            setTimeout(function () {
                $("#child").css("top", "-500px");
            }, 100);
        }
    } else {
        var top = parseInt($("#child").css("top"));

        $("#child").css("top", (top + 100) + "px");
        top = parseInt($("#child").css("top"));
        if (top >= 0) {
            setTimeout(function () {
                $("#child").css("top", "0");
            }, 100);
        }
    }
});