mdarens/jsbin.epigUFu.html

## jsbin.epigUFu.html
<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <h1>Wrappin Queries</h1>
  <h2>Resize the window/frame until the items wrap, or don't</h2>
  <nav class="adaptin">
    <ul data-bind="foreach: thingies">
      <li>Lorem Ipsum</li>
    </ul>
  </nav>
</body>
</html>

## jsbin.epigUFu.js
(function($,sr){

  // debouncing function from John Hann
  // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
  var debounce = function (func, threshold, execAsap) {
      var timeout;

      return function debounced () {
          var obj = this, args = arguments;
          function delayed () {
              if (!execAsap)
                  func.apply(obj, args);
              timeout = null;
          }

          if (timeout)
              clearTimeout(timeout);
          else if (execAsap)
              func.apply(obj, args);

          timeout = setTimeout(delayed, threshold || 30);
      };
  };
  // smartresize
  jQuery.fn[sr] = function(fn){  return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };

})(jQuery,'smartresize');

var vm = {
  thingies: ko.observableArray(new Array(5))
};

ko.applyBindings(vm);

function isYouWrapped($scope, childSelector) {
var
  $container = $scope,
  $children = $(childSelector, $container),
  firstTop = $children.eq(0).offset().top,
  tops = [];

  $container.removeClass('is-wrapped');

  var allTops = $.map($children, function(el){
    return $(el).offset().top === firstTop;
  });

  var allTopsSame = allTops.every(function(item){
    return !!item;
  });


  $container.toggleClass('is-wrapped', !allTopsSame);

}


isYouWrapped($('.adaptin'), 'li');

$(window).smartresize(function(){
  isYouWrapped($('.adaptin'), 'li');
});


## jsbin.epigUFu.less
// Clearfix for clearing floats like a boss
.clearfix() {
	&:before,
	&:after {
		content: "";
		display: table;
	}
	&:after { clear: both; }
	zoom: 1; // trigger hasLayout in IE6-7
}

.box-sizing(@boxmodel: border-box) {
    -webkit-box-sizing: @boxmodel;
       -moz-box-sizing: @boxmodel;
        -ms-box-sizing: @boxmodel;
            box-sizing: @boxmodel;
}

* {
  padding: 0;
  margin: 0;
  .box-sizing();
}

body {
  font: 16px sans-serif;
}

.adaptin {
  .clearfix();
  li {
    list-style: none;
    display: block;
    float: left;
    padding: 1em;
    margin: (1em/8);
    border: (1em/12) solid;
  }
  &.is-wrapped {
    li {
      float: none;
    }
  }
}
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
	<meta charset=utf-8 />
	<title>JS Bin</title>
	</head>
	<body>
	<h1>Wrappin Queries</h1>
	<h2>Resize the window/frame until the items wrap, or don't</h2>
	<nav class="adaptin">
	<ul data-bind="foreach: thingies">
	<li>Lorem Ipsum</li>
	</ul>
	</nav>
	</body>
	</html>
	(function($,sr){

	// debouncing function from John Hann
	// http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
	var debounce = function (func, threshold, execAsap) {
	var timeout;

	return function debounced () {
	var obj = this, args = arguments;
	function delayed () {
	if (!execAsap)
	func.apply(obj, args);
	timeout = null;
	}

	if (timeout)
	clearTimeout(timeout);
	else if (execAsap)
	func.apply(obj, args);

	timeout = setTimeout(delayed, threshold \|\| 30);
	};
	};
	// smartresize
	jQuery.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };

	})(jQuery,'smartresize');

	var vm = {
	thingies: ko.observableArray(new Array(5))
	};

	ko.applyBindings(vm);

	function isYouWrapped($scope, childSelector) {
	var
	$container = $scope,
	$children = $(childSelector, $container),
	firstTop = $children.eq(0).offset().top,
	tops = [];

	$container.removeClass('is-wrapped');

	var allTops = $.map($children, function(el){
	return $(el).offset().top === firstTop;
	});

	var allTopsSame = allTops.every(function(item){
	return !!item;
	});


	$container.toggleClass('is-wrapped', !allTopsSame);

	}



	isYouWrapped($('.adaptin'), 'li');

	$(window).smartresize(function(){
	isYouWrapped($('.adaptin'), 'li');
	});
	// Clearfix for clearing floats like a boss
	.clearfix() {
	&:before,
	&:after {
	content: "";
	display: table;
	}
	&:after { clear: both; }
	zoom: 1; // trigger hasLayout in IE6-7
	}

	.box-sizing(@boxmodel: border-box) {
	-webkit-box-sizing: @boxmodel;
	-moz-box-sizing: @boxmodel;
	-ms-box-sizing: @boxmodel;
	box-sizing: @boxmodel;
	}

	* {
	padding: 0;
	margin: 0;
	.box-sizing();
	}

	body {
	font: 16px sans-serif;
	}

	.adaptin {
	.clearfix();
	li {
	list-style: none;
	display: block;
	float: left;
	padding: 1em;
	margin: (1em/8);
	border: (1em/12) solid;
	}
	&.is-wrapped {
	li {
	float: none;
	}
	}
	}