taipei-light/modules/announcement/_annc_widget21.html.erb

<div class="w-annc  widget-announcement-4 widget-announcement-21">
  <div class="w-annc__more-wrap clearfix">
    <h2 class="w-annc__widget-title">
      <span>{{widget-title}}</span>
    </h2>
    <a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多最新消息" : "More NEWS" %></a>
  </div>
  <ul class="w-annc__list  row" data-level="0" data-list="announcements">
    <li class="w-annc__item  col-md-4">
    <div class="w-annc__img-wrap bullseye">
      <img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
    </div>
    <div class="w-annc__content-wrap">
      <!-- <div class="w-annc__meta">
        <span class="w-annc__status-wrap" data-list="statuses" data-level="1">
          <span class="w-annc__status label {{status-class}}">{{status}}</span>
        </span>
        <span class="w-annc__postdate-wrap" date-format="%Y-%m-%d">
          <i class="fa fa-calendar-o"></i>
          <span class="w-annc__postdate">{{postdate}}</span>
        </span>
        <span class="w-annc__category-wrap">
          <i class="fa fa-tasks"></i>
          <span class="w-annc__category">{{category}}</span>
          </span>
      </div> -->
      <h4 class="w-annc__entry-title">
        <a class="w-annc__title" href="{{link_to_show}}">{{title}}</a>
      </h4>
      <p class="w-annc__subtitle">{{subtitle}}</p>
    </div>
    </li>
  </ul>
</div>
<style type="text/css">
	[data-subpart-id="{{subpart-id}}"] .bullseye{
		overflow: hidden;
	}
  .w-annc__content-wrap{
    border: 1px solid #ffffff4d;
    padding: 10px;
    position: relative;
    min-height: 115px;
    max-height: 115px;
  }
  .w-annc__title{
    color: #fccc27!important;
    font-size: 1.1rem!important;
    font-weight: 600;
    letter-spacing: 0;
  }
</style>
<script>
	function combineul_{{subpart-id}}(){
		var parents = $('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').parent();
		parents.each(function(i,v){
			for(var i=1;i<$(v).find('ul.w-annc__list').length;i++)
				$(v).find('ul.w-annc__list').eq(0).find('>li').eq(-1).after($(v).find('ul.w-annc__list').eq(i).html());
			var ullength = $(v).find('ul.w-annc__list').length;
			for(var i = 1;i < ullength;i++)
				$(v).find('ul.w-annc__list').eq(-1).remove();
		})
	};
	var num;
	var lilength = $('[data-subpart-id=\"{{subpart-id}}\"] li.w-annc__item').length;
	function reorganize_{{subpart-id}}(num){
		combineul_{{subpart-id}}();
		var parents = $('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').parent();
		parents.each(function(i,v){
			var lilength = $(v).find('li.w-annc__item').length;
			var ul_length = Math.ceil(lilength/num);
			for(var ii=1;ii< ul_length;ii++){
				var clone_ul = $(v).find('ul.w-annc__list').eq(-1).clone();
				clone_ul.empty();
				clone_ul.removeClass("active");
				clone_ul.css("display","");
				$(v).find('ul.w-annc__list').eq(-1).after(clone_ul.prop("outerHTML"));
				var lihtml="";
				if(ii != (ul_length-1)){
					for(var j=0;j<num;j++){
						lihtml += $(v).find('li.w-annc__item').eq(ii*num+j).prop("outerHTML");
					};
				}else{
					for(var j=0;j< lilength - num *(ul_length-1) ;j++){
						lihtml += $(v).find('li.w-annc__item').eq(ii*num+j).prop("outerHTML");
					};
				};
				$(v).find('ul.w-annc__list').eq(-1).html(lihtml);
			}
			if(ul_length != 1 )
				for(var i=0;i< lilength -num ; i++)
					$(v).find('ul.w-annc__list').eq(0).find("li.w-annc__item").eq(num).remove();
		})
		$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list >li').css('width','calc('+100/num+'% - '+20/16+'em)'); //20px=>li的margin
		$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list >li').css("float","left");
	};
	$(window).resize(function(){
		if($(window).width()>1024){
			reorganize_{{subpart-id}}(3);
			num=3;
		}else if($(window).width()>576){
			reorganize_{{subpart-id}}(2);
			num=2;
		}else{
			reorganize_{{subpart-id}}(1);
			num=1;
		}
	})
	$(document).ready(function(){
		if($(window).width()>1024){
			reorganize_{{subpart-id}}(3);
			num=3;
		}else if($(window).width()>576){
			reorganize_{{subpart-id}}(2);
			num=2;
		}else{
			reorganize_{{subpart-id}}(1);
			num=1;
		}
	})
</script>