> Good image- Chrome browser
> Not good image- Mozilla Firefox

*Live demo *

码：

<script type="text/javascript">
        $(document).ready(function () {
            $('#pinBoot').pinterest_grid({
                no_columns: 6,padding_x: 10,padding_y: 10,margin_bottom: 50,single_column_breakpoint: 700
            });
        });

        (function ($,window,document,undefined) {
            var pluginName = 'pinterest_grid',defaults = {
                        padding_x: 10,no_columns: 3,single_column_breakpoint: 700
                    },columns,$article,article_width;

            function Plugin(element,options) {
                this.element = element;
                this.options = $.extend({},defaults,options);
                this._defaults = defaults;
                this._name = pluginName;
                this.init();
            }

            Plugin.prototype.init = function () {
                var self = this,resize_finish;

                $(window).resize(function () {
                    clearTimeout(resize_finish);
                    resize_finish = setTimeout(function () {
                        self.make_layout_change(self);
                    },11);
                });

                self.make_layout_change(self);

                setTimeout(function () {
                    $(window).resize();
                },500);
            };

            Plugin.prototype.calculate = function (single_column_mode) {
                var self = this,tallest = 0,row = 0,$container = $(this.element),container_width = $container.width();
                $article = $(this.element).children();

                if (single_column_mode === true) {
                    article_width = $container.width() - self.options.padding_x;
                } else {
                    article_width = ($container.width() - self.options.padding_x * self.options.no_columns) / self.options.no_columns;
                }

                $article.each(function () {
                    $(this).css('width',article_width);
                });

                columns = self.options.no_columns;

                $article.each(function (index) {
                    var current_column,left_out = 0,top = 0,$this = $(this),prevAll = $this.prevAll(),tallest = 0;

                    if (single_column_mode === false) {
                        current_column = (index % columns);
                    } else {
                        current_column = 0;
                    }

                    for (var t = 0; t < columns; t++) {
                        $this.removeClass('c' + t);
                    }

                    if (index % columns === 0) {
                        row++;
                    }

                    $this.addClass('c' + current_column);
                    $this.addClass('r' + row);

                    prevAll.each(function (index) {
                        if ($(this).hasClass('c' + current_column)) {
                            top += $(this).outerHeight() + self.options.padding_y;
                        }
                    });

                    if (single_column_mode === true) {
                        left_out = 0;
                    } else {
                        left_out = (index % columns) * (article_width + self.options.padding_x);
                    }

                    $this.css({
                        'left': left_out,'top': top
                    });
                });

                this.tallest($container);
                $(window).resize();
            };

            Plugin.prototype.tallest = function (_container) {
                var column_heights = [],largest = 0;

                for (var z = 0; z < columns; z++) {
                    var temp_height = 0;
                    _container.find('.c' + z).each(function () {
                        temp_height += $(this).outerHeight();
                    });
                    column_heights[z] = temp_height;
                }

                largest = Math.max.apply(Math,column_heights);
                _container.css('height',largest + (this.options.padding_y + this.options.margin_bottom));
            };

            Plugin.prototype.make_layout_change = function (_self) {
                if ($(window).width() < _self.options.single_column_breakpoint) {
                    _self.calculate(true);
                } else {
                    _self.calculate(false);
                }
            };

            $.fn[pluginName] = function (options) {
                return this.each(function () {
                    if (!$.data(this,'plugin_' + pluginName)) {
                        $.data(this,'plugin_' + pluginName,new Plugin(this,options));
                    }
                });
            }

        })(jQuery,document);
    </script>

html / PHP代码

<div class="row"> 
    <section id="pinBoot"> 
        <?PHP
        if (empty($query4)) {
            echo '<p style="color:red;">&nbsp;&nbsp;&nbsp;&nbsp;No Books To Display!</p>';
        } else {
            foreach ($query4 as $row) {
                ?>
                <article class="white-panel">
                <?PHP echo "<img src='" . base_url() . "uploads/books/$row->img1' alt='.$row->book_title.'  title='$row->book_title By $row->auth_firstname $row->auth_lastname' />"; ?>
                <h4>
                <a class="title" href="#">
                <?PHP echo "$row->book_title"; ?>
                </a>
                </h4> 
                <left> <img src="http://www.homequalitymark.com/filelibrary/interactive_scorecard/4_star.png" style="width:50%;height:12px;"/></left>
                <p> By 
                <a class="link" href="" title="<?PHP echo $row->book_title ?>">
                <?PHP
                $afl = $row->auth_firstname . ' ' . $row->auth_lastname;
                $tafln = strlen($afl);
                if ($tafln >= 15) {
                    $afln = strip_tags($afl);
                    $safln = substr($afln,11);
                    echo "<span class='author'>$safln ...</span>";
                } else {
                    echo "<span title='$row->auth_firstname $row->auth_lastname' class='author'> $row->auth_firstname $row->auth_lastname</span>";
                }
                ?> 
                </a> <br/>
                Number of Pages:<?PHP echo $row->pages; ?>
                </p>   
                <a href="#" class="btn btn-default btn-xs rent-btn" data-id="<?PHP echo $row->book_id; ?>"   role="button">Rent</a>
                <a href="#" class="btn btn-default btn-xs rent-btn" role="button">Add to Wishlist</a>
                </p>
                </article> 
                <?PHP


            }
        }
        ?>  
    </section> 
    <hr> 
    <div id="divId">

    </div>
</div>