新闻特殊排版js效果

在这里插入图片描述
HTML部分

<ul class="newsBox">
	<li>
		<div class="newPIc">
			<a href="/xinwenzixun/2017/1220/24.html" title="">
				<img src="/uploads/171220/2-1G220151522627.jpg" alt="">
			</a>
		</div>
		<div class="newText">文字部分文字部分文字部分文字部分文字部分</div>
	</li>
	<li>
		<div class="newPIc">
			<a href="/xinwenzixun/2017/1220/24.html" title="">
				<img src="/uploads/171220/2-1G220151522627.jpg" alt="">
			</a>
		</div>
		<div class="newText">文字部分文字部分文字部分文字部分文字部分</div>
	</li>
	<li>
		<div class="newPIc">
			<a href="/xinwenzixun/2017/1220/24.html" title="">
				<img src="/uploads/171220/2-1G220151522627.jpg" alt="">
			</a>
		</div>
		<div class="newText">文字部分文字部分文字部分文字部分文字部分</div>
	</li>
</ul>

3个解决方法,最终的效果都是一样;

x01 不适用 跨屏/自适应 的前端

$(".newsBox li:nth-child(2) .newText").after($(".newsBox li:nth-child(2) .newPic"));

x02 可用于自适应,跨屏 的前端

$(function(){
	$(".newsBox li:eq(1) .newPIc").before($(".newsBox li:eq(1) .newText"));
	if ($(window).width()<880) {
		$(".newsBox li:eq(1) .newText").before($(".newsBox li:eq(1) .newPIc"));
	}
})

x03 可用于自适应,跨屏 的前端

$(function(){
	if($(window).width()>880){
		$(".newsBox li:eq(1) .newPic").before($(".newsBox li:eq(1) .newText"));
	}
})
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以考虑使用RecyclerView控件来实现Android新闻列表的简单排版。下面是一个示例代码: 1. 在layout文件夹下新建一个xml文件,命名为item_news.xml,作为RecyclerView中每一个item的布局。 ``` <LinearLayout android:orientation="vertical" android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="16dp"> <TextView android:id="@+id/tv_news_title" android:layout_width="match_parent" android:layout_height="wrap_content" android:textSize="18sp" android:textColor="#000000" android:textStyle="bold"/> <TextView android:id="@+id/tv_news_content" android:layout_width="match_parent" android:layout_height="wrap_content" android:textSize="16sp" android:textColor="#666666" android:layout_marginTop="8dp"/> <TextView android:id="@+id/tv_news_time" android:layout_width="match_parent" android:layout_height="wrap_content" android:textSize="14sp" android:textColor="#999999" android:layout_marginTop="8dp"/> </LinearLayout> ``` 2. 在layout文件夹下新建一个xml文件,命名为fragment_news.xml,作为新闻列表页面的布局。 ``` <androidx.recyclerview.widget.RecyclerView android:id="@+id/rv_news_list" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="16dp"/> ``` 3. 在对应的Activity或Fragment中,初始化RecyclerView并设置Adapter。 ``` public class NewsFragment extends Fragment { private RecyclerView rvNewsList; private NewsAdapter newsAdapter; public View onCreateView(@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View root = inflater.inflate(R.layout.fragment_news, container, false); rvNewsList = root.findViewById(R.id.rv_news_list); rvNewsList.setLayoutManager(new LinearLayoutManager(getContext())); newsAdapter = new NewsAdapter(); rvNewsList.setAdapter(newsAdapter); return root; } private class NewsAdapter extends RecyclerView.Adapter<NewsViewHolder> { private List<News> newsList; public NewsAdapter() { newsList = new ArrayList<>(); // 添加新闻数据 newsList.add(new News("标题1", "内容1", "2021-01-01")); newsList.add(new News("标题2", "内容2", "2021-01-02")); newsList.add(new News("标题3", "内容3", "2021-01-03")); } @NonNull @Override public NewsViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) { View itemView = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_news, parent, false); return new NewsViewHolder(itemView); } @Override public void onBindViewHolder(@NonNull NewsViewHolder holder, int position) { News news = newsList.get(position); holder.tvTitle.setText(news.getTitle()); holder.tvContent.setText(news.getContent()); holder.tvTime.setText(news.getTime()); } @Override public int getItemCount() { return newsList.size(); } } private static class NewsViewHolder extends RecyclerView.ViewHolder { private TextView tvTitle; private TextView tvContent; private TextView tvTime; public NewsViewHolder(@NonNull View itemView) { super(itemView); tvTitle = itemView.findViewById(R.id.tv_news_title); tvContent = itemView.findViewById(R.id.tv_news_content); tvTime = itemView.findViewById(R.id.tv_news_time); } } } ``` 4. 最后,定义一个News类来存储新闻数据。 ``` public class News { private String title; private String content; private String time; public News(String title, String content, String time) { this.title = title; this.content = content; this.time = time; } public String getTitle() { return title; } public String getContent() { return content; } public String getTime() { return time; } } ``` 以上就是一个简单的Android新闻列表排版示例。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值