Divide loop into several columns based on post custom field and enable infinite scrolling

Question

How can I divide WP loop into several columns based on post custom field and enable invinite scrolling?

Below is the desired output markup based on Twitter Bootstrap framework.

<div class="row">
    <!-- custom field = 'normal' -->
    <div class="span2 normal">
        <div class="post">
            <h1>Post Title</h1>
        </div>
        <div class="post">
            <h1>Post Title</h1>
        </div>
    </div>
    <!-- custom field = 'featured' -->
    <div class="span4 featured">
        <div class="post">
            <h1>Post Title</h1>
        </div>
        <div class="post">
            <h1>Post Title</h1>
        </div>
    </div>
    <!-- custom field = 'super-featured' -->
    <div class="span6 super-featured">
        <div class="post">
            <h1>Post Title</h1>
        </div>
        <div class="post">
            <h1>Post Title</h1>
        </div>
    </div>
</div>

You may see the example at Mashable.

Answer 1

Use something like this for each column.

<!-- custom field = 'normal' -->
<div class="span2 normal">
<?php

// The Query
$the_query = new WP_Query(

array( 

'meta_key' => 'your_custom_field_name', 
'meta_value' => 'normal'

 );

// The Loop
while ( $the_query->have_posts() ) : $the_query->the_post();
        echo '<div class="post">
<h1>' . get_the_title() . '</h1>
</div>';
endwhile;

// Reset Post Data
wp_reset_postdata();

?>
</div>

Then follow the infinite scroll instructions found here.