0

検索クエリを使用して画像をロードし、jQuery Blocks It プラグイン ( BlocksIt.js )を使用して配置しようとしています。これは関連する JavaScript です。 

    <script>
            function getResults(query, max, $selector)
            {
                $selector.html("Loading...");
                $.getJSON('/search', {query: query, max: max}, function(data) {
                    var items = data;
                    $selector.html("");
                    for(var i=0; i<data.length; ++i)
                        $selector.html($selector.html()+"<div class='img-holder' ><img  class='search-image' src='"+ data[i] +"' /></div>");
                });

                $selector.waitForImages({
                    finished: function(){
                        $selector.BlocksIt({
                            numOfCol: 4,
                            offsetX: 1,
                            offsetY: 1
                        });
                    },
                    waitForAll: true
                });
                $selector.css({height: '500px', overflow: 'auto'});
            }
            jQuery(function($) {
                $('form[data-async]').live('submit', function(event) {
                    getResults($('#db-search').val(), 20, $('.search-results'));
                    $('.search-results').BlocksIt({
                        numOfCol: 4,
                        offsetX: 1,
                        offsetY: 1
                    });
                    event.preventDefault();
                });
            });

</script>

DOM は次のようになります。

<div class='row-fixed'>
                <div class='span4'>
                    <form data-async class="search-form navbar-search pull-left" action='/search'>
                        <input type="text" id='db-search' class="search-query" name='query' placeholder="Search" />
                        <input type='hidden' name='max' value=20 />
                    </form>
                    <div class="search-results" style="width: 100%; height:500px; position:relative;">

                    </div>
                </div>
            </div>

BlocksIt() 関数を 2 回呼び出しています。画像が読み込まれる前に 1 回、読み込まれた後に 1 回です。私も一度だけ（画像の読み込み前と後の両方）やってみましたが、うまくいかないようです。イメージは、 の幅の 100% に等しい幅で表示されますdiv.search-results。しかし、イメージがロードされた後、Chrome Dev Tools コンソール ウィンドウで関数を呼び出すと、次のようになります。

$('.search-results').BlocksIt({
                    numOfCol: 4,
                    offsetX: 1,
                    offsetY: 1
                });

画像は完全に整列およびサイズ変更されます。適切に行うのを手伝ってください。

4

1 に答える 1

0

このコードは決して呼び出されません!

jQuery(function($) {
     $('form[data-async]').live('submit', function(event) {
          getResults($('#db-search').val(), 20, $('.search-results'));
          $('.search-results').BlocksIt({
          numOfCol: 4,
          offsetX: 1,
          offsetY: 1
           });
         event.preventDefault();
      });
});
于 2013-06-26T11:06:37.207 に答える